webpack项目打包

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()],
}