webpack-Plugin

webpack-Plugin

1、认识Plugin

• Webpack核心是Plugin
• Loader是用于特定的模块类型进行转换；
• Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

2、CleanWebpackPlugin

自动删除dist文件

安装：npm install clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins: [new CleanWebpackPlugin()],

2、HtmlWebpackPlugin

对于html文件进行处理，实现打包时在dist文件夹中自动生成index.html并引入bundle.js

安装：npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
      //  添加title
      title: 'webpack',
      // 自定义模板引擎，在public下面自定义一个属于自己的模板引擎
      template: './public/index.html',
    }),
  ],

3、DefinePlugin

允许在编译时创建配置的全局常量，是一个webpack内置的插件，处理HtmlWeboack模板的常量数据

在编译template模板时，会有一个BASE_URL，需要定义一个对应的常量

内置插件，不需要单独安装

const { DefinePlugin } = require('webpack');
plugins: [
new DefinePlugin({
      BASE_URL: '"./"',
    }),
  ],

4、CopyWebpackPlugin

将from目录下的文件复制到to（默认根据output目录）文件夹中

安装：npm install copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
	new CopyWebpackPlugin({
    // 匹配
      patterns: [
        {
          from: 'public',
          globOptions: {
            // 要忽略的文件
            ignore: ['**/index.html','**/.DS_Store'],
          },
        },
      ],
    }),
 ],