安装 Webpack
- 新建
webpack文件夹，使用Visual Studio Code打开，在终端输入初始化命令进行初始化，将生成package.json文件，命令如下：
cnpm init -y
- 安装
Webpack，在终端输入安装命令进行安装，命令如下：
cnpm install webpack --save-dev
cnpm install webpack-cli --save-dev
Webpack 打包部署
- 在
webpack文件夹下新建src文件夹，在此文件夹下新建一个index.js文件，并在index.js文件中添加如下代码：
document.write("Hello World!");
- 在
package.json文件中的scripts字段新增 3 个命令：
"build": "webpack",
"dev": "webpack --mode development",
"production": "webpack --mode production"
- 在终端输入
Webpack打包命令，成功运行后会在当前目录下建立dist文件夹，并生成main.js文件：
cnpm run build
- 或运行
Webpack 4提供的两种模式进行打包构建。一种是dev，用于加速开发、减少构建时间而不考虑生成大小的开发模式；另一种是production，用于生产环境的生产模式，会打包出最小的压缩生产环境代码，命令分别如下：
cnpm run dev
cnpm run production
Webpack 文件加载
- 在
webpack文件夹下新建一个index.html文件，使用!+tab补全代码后，需在<body>标签中，添加如下代码：
<script type="text/javascript" src="dist/main.js" charset="UTF-8"></script>
- 双击运行
index.html
1.png
网友评论