为什么要打包发布
项目开发完成之后,需要使用 webpack 对项目进行打包发布,主要原因有以下两点:
① 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件
为了让项目能够在生产环境中高性能的运行,因此需要对项目进行打包发布。
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下,新增 build 命令如下:
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
--model 是一个参数项,用来指定 webpack 的运行模式。production 代表生产环境,会对打包生成的文件 进行代码压缩和性能优化。
注意:通过 --model 指定的参数项,会覆盖 webpack.config.js 中的 model 选项
在 webpack.config.js 配置文件的 output 节点中,进行如下的配置:
module.exports = {
mode: "development",
// entry 要处理的哪个文件
entry: path.join(__dirname, './src/index.js'),
// 指定生成的文件要存放在哪里
output: {
// 存放的目录
path: path.join(__dirname, 'dist'),
// 生成的文件名 ( 明确的告诉webpack 把生成的js文件放在dist目录下的js子目录中 )
filename: 'js/main.js'
}
}
修改 webpack.config.js 中的 url-loader 配置项,新增 outputPath 选项即可指定图片文件的输出路径:
// 处理样式表中与 url 路径相关的文件
{
test: /\.(png|jpg|gif)$/i,
use: [
{
// 如果有多个loader需要指定为数组
loader: 'url-loader',
options: {
limit: 200000,
// 明确指定把打包生成的图片文件,储存到dist目录下的image文件夹中
outputPath: 'image'
}
}
]
},
为了在每次打包发布时自动清理掉 dist 目录中的旧文件,可以安装并配置 clean-webpack-plugin 插件:
npm i clean-webpack-plugin@3.0.0 -D
安装clean-webpack-plugin插件
// 按需导入插件,得到插件的构造函数之后,创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 将创建的实例对象 挂载到plugins节点中
const cleanPlugin = new CleanWebpackPlugin()
将创建的实例对象 挂载到plugins节点中
module.exports = {
mode: "development",
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/main.js'
},
// 将创建的实例对象 挂载到plugins节点中
plugins: [htmlPlugin, cleanPlugin]
}