plugin是对于现有架构进行扩展
plugin和loader的区别
loader主要用于转换某些类型的模块,是一个转换器
plugin是插件,对webpack本身的扩展,是一个扩展器
plugin的使用过程
1,通过npm进行安装
2,在webpack.config.js中的plugins中配置插件
添加版权声明的plugin
在webpack.config.js中添加,为module.exports对象:
const webpack = require("webpack");
plugins:[
new webpack.BannerPlugin("最终版权归hjf所有!"),
],
然后运行npm run build
打包html的plugin
将html打包到dist文件夹里面
安装
npm install html-webpack-plugin@3.2.0 --save-dev
配置
在webpack.config.js中进行配置,同上版权配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins:[
new webpack.BannerPlugin("最终版权归hjf所有!"),
new HtmlWebpackPlugin()
],
然后打包后
在dist文件夹中生成了html,所以需要修改之前的配置(因为路径都是在同一目录下,所以不需要在路径前添加dist)
添加模板
new HtmlWebpackPlugin({
template: 'index.html'
})
index.html的目录和内容
添加模板运行结果
对js文件进行压缩(丑化)
一般在最后发布时使用
打包后js文件中有许多空格和不必要的字符
安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
配置
同版权声明,在webpack.config.js进行配置
const uglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin")
plugins:[
new webpack.BannerPlugin("最终版权归hjf所有!"),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new uglifyJsWebpackPlugin(),
],