webpack3最新版本配置研究（三）webpack压缩，clean-webpack-plugin，webpack-manifest-plugin，define-plugin

webpack.optimize.UglifyJsPlugin

前端代码优化自然少不了压缩了，在webpack中也可以使用它的插件来进行自动压缩，非常的方便

// A:webpack.config.js
// B: ...
// A: ...
// 头部加上webpack的声明
const webpack = require('webpack');
// plugins里面加上一条配置
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),

1
2
3
4
5
6
7
8
9
10
11
12
13
14

再继续npm run webpack之后发现，public/js里面的js都被压缩了

clean-webpack-plugin

在webpack中打包生成的文件会覆盖之前的文件，不过生成文件的时候文件名加了hash之后会每次都生成不一样的文件，这就会很麻烦，不但会生成很多冗余的文件，还很难搞清楚到底是哪个文件，这就需要引入该插件 

npm install –save-dev clean-webpack-plugin

//webpack.config.js
//引入clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');

//plugin插入你想删除的路径，注意在生成出来文件之前，他会删除public的文件夹，而不是根据生成的文件来删除对应的文件，如果文件夹中所有的文件都是根据webpack生成的，，所以有什么额外的文件最好别引用这个！！！
new CleanWebpackPlugin(['public']);

1
2
3
4
5
6

webpack-manifest-plugin

该插件可以显示出编译之前的文件和编译之后的文件的映射 

npm install –save-dev webpack-manifest-plugin

//webpack.config.js
const ManifestPlugin = require('webpack-manifest-plugin');
//plugin插入
new ManifestPlugin({
fileName: 'manifest.json',
basePath: '/public/',
})

1
2
3
4
5
6
7

运行npm run webpack之后，public中会生成一个manifest.json的文件来显示映射关系 

DefinePlugin

这个是webpack自带插件不用install，他会类似定义一个变量，在webpack中编译的时候可以使用

//webpack.config.js中plugin加些测试数据
//每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。
//如果这个值是一个字符串，它会被当作一个代码片段来使用。
//如果这个值不是字符串，它会被转化为字符串(包括函数)。
//如果这个值是一个对象，它所有的 key 会被同样的方式定义。
//如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object"),
consoletest: JSON.stringify('this is a console test')
})

//index.js增加一个
console.log(consoletest);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

npm install webpack之后会发现index.html中间输出了定义的consoletest对应的字符串