webpack项目打包
1.配置webpack的打包
在package.json下的"scripts",新增如下命令
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
–mode:参数项,用来指定webpack的运行模式,production带包生产环境,进行代码压缩和性能优化。
注:–mode指定的参数项会覆盖webpack.config.js中的mode
2.打包
打包时运行
npm run build
生成dist文件交给后端进行发布
3.打包时规范js文件位置
在webpack.config.js中使用output将打包的js文件全部放在dist的js目录中
output:{
path: path.join(__dirname,'dist'),//存放的目录
filename: 'js/index.js'//生产的文件名
},
注:每次打包前可先删除之前的dist文件。
4.打包时规范图片文件位置
把图片文件统一生成到dist下的images目录中。
修改webpack.config.js中的ul-loader配置,新增outputPath选项指定图片文件的输出路径。
{test:/\.jpg|.png|.gif$/,use:'url-loader?limit=22229&outputPath=images'}
5.每次打包前自动删除之前的dist(clean-webpack-plugin)
(1)安装clean-webpack-plugin插件
运行如下命令(可在官网进行复制):
npm install --save-dev clean-webpack-plugin
(2)配置clean-webpack-plugin
在webpack.config.js中进行配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
plugins:[htmlPlugin,new CleanWebpackPlugin()],
}