起步

plugin是什么？

plugin是插件的意思，通常是用于对某个现有的架构进行扩展。webpack中插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等

loader 和 plugin区别

  • loader 主要用于转换某些类型的模块，它是一个转换器
  • plugin 是插件，它是对webpack本身的扩展，是一个扩展器

plugind 的使用过程

  • 步骤一：通过npm安装需要使用的plugins（某些webpack已经内置的插件不需要安装）
  • 步骤二：在webpack.config.js中plugins中配置插件

添加版权的Plugin

使用一个最简单的插件，为打包的文件添加版权声明。插件名字叫BannerPlugin，属于webpack自带的插件

webpack.config.js

1
2
3
4
5
6
7
8
//导入webpack自带插件
const webpack = require('webpack');

module.exports = {
  plugins: [
        new webpack.BannerPlugin('最终版权归Simplelife所有')
    ],
}

打包html的plugin

在真实开发项目时，发布的dist文件夹，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义，因此我们需要通过HtmlWebpackPlugin插件，将index.html文件打包到dist文件夹中

HtmlWebpackPlugin插件的作用：

  • 自动生成index.html文件（可以指定模板来生成）
  • 将打包好的js文件，自动通过script标签插入到body中

安装插件

1
npm install html-webpack-plugin --save-dev

使用插件，配置修改

修改webpack.config.js 文件中plugins部分内容：

1
2
3
4
5
6
7
8
9
// 在plugins添加 new HtmlWebpackPlugin()时，会自动添加这个导入，如果你没有，还请手动导入
const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
	new HtmlWebpackPlugin({
		template: 'index.html'
	})

]

这里的template表示根据什么模板来生成index.html，另外，我们需要删掉之前在output中添加的publicPath属性(好吧我根本没有)，否则会影响插入的script标签中src可能会有问题

1
2
3
4
5
// 1. 安装plugins插件
// 2. 配置plugins内容
// 3. 允许npm run build
// 4. 成功后点开dist文件夹下，会有一个index.html
npm run build

JS压缩的plugin

在项目发布之前，我们必然需要对JS等文件进行压缩处理。这里，我们就对打包的js文件进行压缩，我们使用一个第三方的插件uglifyjs-webpack-plugin

安装插件

1
npm install uglifyjs-webpack-plugin --save-dev

修改配置

webpack.config.js

1
2
3
4
5
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

plugins:[
	new UglifyJsPlugin()
]