webpack二刷笔记(4)webpack的核心概念-插件(plugin)

plugin的概念

plugin用于打包优化，资源管理，注入环境变量、plugin则可以用于执行范围更广的任务。而 loader 只用于转换某些类型的模块。plugin作用于整个构建过程。plugin目的在于解决 loader 无法实现的其他事。

plugin的配置

plugin的使用：使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

    cnpm i html-webpack-plugin -D # 创建html文件并将打包后生成的js引入的生成的.html文件中

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin");

    module.exports = {
        entry: "./src/main.js",
        output: {
            path: path.join(__dirname, "dist"),
            filename: "[name].[chunkhash:16].js"
        },
        mode: "none",
        plugins: [new htmlWebpackPlugin()]  // 使用插件
    };

一些常用的plugin

    cnpm i html-webpack-plugin -D           # 创建html文件并将打包后生成的js引入的生成的.html文件中
    cnpm i clean-webpack-plugin -D          # 清理构建日录
    cnpm i extract-text-webpack-plugin -D   # 将css从打包文件中提取出来成一个单独的css文件
    cnpm i copy-webpack-plugin -D           # 将已经存在的单个文件或整个目录复制到构建目录。
    cnpm i uglifyjs-webpack-plugin -D       # 使用 uglify-js 压缩 js 文件
    cnpm i zip-webpack-plugin -D            # 将打包后所有资源压缩到一个zip文件中。

plugin概念参考: https://webpack.docschina.org/concepts/#plugins
plugin配置参考: https://webpack.docschina.org/concepts/plugins/#configuration
常用的plugin参考: https://webpack.docschina.org/plugins/
zip-webpack-plugin参考: https://github.com/erikdesjardins/zip-webpack-plugin