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-pluginconst 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.jsconst 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对应的字符串