webpack.optimize.UglifyJsPlugin
前端代码优化自然少不了压缩了,在webpack中也可以使用它的插件来进行自动压缩,非常的方便
- 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
- 1
- 2
- 3
- 4
- 5
- 6
webpack-manifest-plugin
该插件可以显示出编译之前的文件和编译之后的文件的映射
npm install –save-dev webpack-manifest-plugin
- 1
- 2
- 3
- 4
- 5
- 6
- 7
运行npm run webpack之后,public中会生成一个manifest.json的文件来显示映射关系
DefinePlugin
这个是webpack自带插件不用install,他会类似定义一个变量,在webpack中编译的时候可以使用
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
npm install webpack之后会发现index.html中间输出了定义的consoletest对应的字符串