webpack 详解六:plugin使用
loader主要用于转换某些类型的模块,它是一个转换器
plugin是插件,它是对webpack本身的扩展,是一个扩展器
plugin的使用过程:
步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件
添加版权的 plugin 的使用
重新打包程序:查看bundle.js文件的头部,看到如下信息
打包html的 plugin
目前我们打包项目的时候,是没有 打包 html文件
这时候需要用到,HtmlWebPackPlugin
这个插件可以帮助我们,自动生成一个index.html文件 (可以指定模板生成)
将打包的js文件,自动通过script标签插入到body中
开始安装 HtmlWebpackPlugin 插件
命令 npm install html-webpack-plugin --save-dev
配置 webpack.config.js 文件中的plugins
这里的template表示根据什么模板来生成index.html 另外
我们需要删除之前在output中添加的publicPath属性
否则插入的script标签中的src可能会有问题
js压缩的plugin
使用的是第三方的插件uglifyjs-webpack-plugin
指定的版本号,要和CLI 一致才行
安装命令
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js 文件
到此 webpack的 plugin 告一段落
拜拜