WebPack中Plugins的使用和整理，以及常用的Plugins插件

摘要：Plugins是webpack的基础，我们都知道webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件，以及我们常用的Plugins插件

Plugins是webpack的基础，我们都知道webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。

内置插件

通过在webpack配置中使用插件属性来将插件包含进你的项目中。

var webpack = require("webpack");
module.exports = {
    plugins: [
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"])
    ]
};

其他插件

其他不是内置的插件可以通过NPM安装已经发布了的插件，如果插件没有发布到npm，也可以通过其他方式安装：

npm install component-webpack-plugin

然后就能像下面这样来使用：

var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

如果是通过npm来安装第三方插件，建议使用https://www.npmjs.com/package/webpack-load-plugins工具。它会在你项目的依赖当中检查所有的第三方插件，只有在你需要用到的时候才会加载它们。

常用webpack的plugin

html-webpack-plugin

const htmlWebpackPlugin=require('html-webpack-plugin');
plugins:[
        new htmnlWebpackPlugin({
            template:'index.html',
            filename:'home.html',
            title:'webpack',
            data:'aaaaaa'
        })
 ]
//向index.html传入title和data变量值，并且生成home.html；一个plugins数组中科院有多个HtmlWebpackPlugin对象实例

open-browser-webpack-plugin

const OpenBrowserWebpackPlugin=require('open-browser-webpack-plugin');
plugins:[
    new OpenBrowserWebpackPlugin({url:'https://localhost:8877'})
]
//启动webpack之后，自动打开浏览器

extract-text-webpack-plugin

const ExtractTextPlugin=require('extract-text-webpack-plugin'); plugins:[
     new ExtractTextPlugin('main.css')
]
//插件打包css代码到main.css中

copy-webpack-plugin

const CopyWebpackPlugin=require('copy-webpack-plugin'); 
new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]);
//作用：把public 里面的内容全部拷贝到编译目录

webpack-md5-hash

const WebpackMd5Hash=require('webpack-md5-hash');
output: {
        //... 
        chunkFilename: "[name].[chunkhash:6].js"
},
plugins:[
    new WebpackMd5Plugin();
]
//它的作用是生成具有独立hash值的css和js文件，即css和js文件hash值解耦。webpack-md5-hash插件对chunk-hash钩子进行捕获并重新计算chunkhash，它的计算方法是只计算模块本身的当前内容（包括同步模块）。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_205