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

 

拜拜

posted @ 2019-12-29 17:24  某年某月某某人  阅读(242)  评论(0)    收藏  举报