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