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 告一段落

 

拜拜