欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack中常用的plugin

程序员文章站 2024-02-11 11:46:04
...

什么是plugin?

对于 loader,它就是一个转换器,将 A 文件进行编译形成 B 文件,这里操作的是文件, 比如将 A.scss 或 A.less 转变为 B.css,单纯的文件转换过程;

对于 plugin,它就是一个扩展器,它丰富了 wepack 本身,针对是 loader 结束后, webpack 打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听 webpack 打包过程中的某些节点,执行广泛的任务。

loader 被用于转换某些类型的模块,而插件则可以用于执行广泛的任务。插件的范围包 括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用 来处理各种各样的任务。

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

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译周期访问。

用法:

module.exports = {
//...
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/templet.html',
            filename: 'pageA.html',
            title: 'pageA',
            chunks: ['pageA'],
            hash: true,
            minify: {
                removeAttributeQuotes: true
            }
        })
    ],
//...

常用 Plugin 介绍以及配置(适用 Webpack4.0+)

1.mini-css-extract-plugin

css-提取,看名字就懂提取 css 用的。在这之前我们可能会使用 extract-text-webpackplugin 比较多一些,两者相比它有什么优势呢?

extract-text-webpack-plugin 它对 css 的提取,最终是根据你创建的实例、或者配置多个入口 chunk 来的,比如你配置了一个 入口文件,最终所有的 css 都会提取在一个样式文件里,如果你创建了多个 extracttext-webpack-plugin 实例,则会生成多个 css 的文件,而 mini-css-extract-plugin, 它默认就会对你的样式进行模块化拆分,嗯,有点跟 output 里的配置一个意思,异步按 需加载,不再仅仅是 js 的特权:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '../'
                }
            },
            "css-loader"
        ]}
    ]}
}

2.optimize-css-assets-webpack-plugin

它将在 Webpack 构建期间搜索 CSS 资源,并将优化\最小化 CSS:

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        }]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true } }],
            },
            canPrint: true
        })
    ]
};

配置介绍 :

  • assetNameRegExp:默认是全部的 css 都会压缩,该字段可以进行指定某些要处理 的文件
  • cssProcessor:指定一个优化 css 的处理器,默认 cssnano
  • cssProcessorPluginOptions:cssProcessor 后面可以跟一个 process 方法,会返 回一个 promise 对象,而 cssProcessorPluginOptions 就是一个 options 参数选 项
  • canPrint:布尔,是否要将编译的消息显示在控制台,没发现有什么用
  • 坑点 :建议使用高版本的包,之前低版本有遇到样式丢失把各浏览器前缀干掉的 问题

3.html-webpack-plugin

为 html 文件中引入的外部资源如 script、link 动态添加每次 compile 后的 hash,防止引用缓存的外部文件问题

可以生成创建 html 入口文件,比如单页面可以生成一个 html 文件入口,配置 N 个 html-webpack-plugin 可以生成 N 个页面入口

new HtmlWebPackPlugin({
    filename: path.resolve(__dirname, '../assets/index.html'),
    template: path.resolve(__dirname,"../views/temp.html"),
    minify:{ //压缩 HTML 文件
        removeComments:true,
        collapseWhitespace:true
    },
    inlineSource: '.(js|css)',
    inject: false,
    chunks: ['vendors', 'index'], 
    hash:true,
    favicon、meta、title     
    htmlWebpackPlugin.options.title 
 ……
})

配置介绍:

  • filename:输出文件名
  • template:模板文件,不局限于 html 后缀哦
  • removeComments:移除 HTML 中的注释
  • collapseWhitespace:删除空白符与换行符,整个文件会压成一行
  • inlineSource:插入到 html 的 css、js 文件都要内联,即不是以 link、script 的 形式引入
  • inject:是否能注入内容到 输出 的页面去
  • chunks:指定插入某些模块
  • hash:每次会在插入的文件后面加上 hash ,用于处理缓存 

4.uglifyjs-webpack-plugin

js 代码压缩,默认会使用 optimization.minimizer

//默认:
optimization:{
    minimizer:true
}

//自定义
minimizer: [
    new UglifyJsPlugin({
        cache: true,
        // cache: "assets",
        parallel: true, //也可以指定 Number ,即最多并行运行数量
        sourceMap: true,
        uglifyOptions: {
            output: {
            comments: false
        },
        compress: {
            warnings: false,
            drop_console:true
        }
    })
]

配置介绍:

  • cache: Boolean/String ,字符串即是缓存文件存放的路径
  • test:正则表达式、字符串、数组都可以,用于只匹配某些文件,如: /.js(\?.*)?$/i;
  • parallel : 启用多线程并行运行来提高编译速度,经常编译的时候听到电脑跑的 呼呼响,可能就是它干的,哈哈~;
  • output.comments : 删除所有注释
  • compress.warnings :插件在进行删除一些无用代码的时候,不提示警告,
  • compress.drop_console:喜欢打 console 的同学,它能自动帮你过滤掉,再也不 用担心线上还打印日志了; 

5.HotModuleReplacementPlugin

热更新替换,在不刷新重载页面的情况下更换编辑修改后的代码

只会更新改动过的内容,所以速度很快,几乎在自己刚改完,切到浏览器窗口内 容就已经更新完了

使用 HotModuleReplacementPlugin 插件后,它会暴露一个 module.hot 对象。

因为 Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server,后者是在打包文 件改变时更新打包文件或者 reload 刷新整个页面,HRM 是只更新修改的部分。

配置 webpakc-dev-server:

devServer:{
    port:8080,
    contentBase:path.join(__dirname,'./dist'),//设置 url 的根目录,如果不设置,
    //则默认是指向项目根目录
    historyApiFallback : true,//让所有 404 的页面定位到 index.html
    hotOnly:true
},
hotOnly:true 表示只会对可以热更新的部分进行热更新

 安装对应的插件: 

plugins: [
    new webpack.NamedModulesPlugin(), //用于启动 HMR 时可以显示模块的相对路径
    new webpack.HotModuleReplacementPlugin(), //hot module replacement 启动模块热
        //替换的插件
]

 入口文件配置接受热更新:

if (module.hot) {
    module.hot.accept(() => {
        const NextApp = require('component/App/App').default;
        renderWithHotReload(App);
     });
}

以上就是为大家整理的=项目中常用的插件。对于 Webpack 中的插件是非常多的,但是常 用的就是这些。对于插件,是为了我们更好的编程。所以使用插件也要适度。

相关标签: webpack plugin