pugins文件应该放在webconfig.js的那个地方，是module,还是什么？

  • Z时代
  • 2024-02-17
  • 分类：IT

我的插件配置如下，请问怎么将他放到我的webpackconfig.js里面，const CompressionPlugin = require("compression-webpack-plugin");
plugins: [

    new CompressionPlugin({
        filename: '[path].gz[query]', 
        algorithm: 'gzip',
        // test: /\.(js|css)$/,    
        test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
        threshold: 10240,
        minRatio: 0.8
    })
],

我的整个webpackconfig文件如下，

 var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// configureWebpack: config => {
//     config.plugins.push(
//         new CompressionWebpackPlugin()
//     )
// },
entry: {
    bundle : './src/lib.min.js'
},
output: {
    filename: "[name]-[hash].js",
    path: __dirname + '/dist',
},
module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            use: 'url-loader?limit=8192'
        }
    ]
    ,
     plugins: [
    new CompressionPlugin({
        filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
        algorithm: 'gzip',//算法
        // test: /\.(js|css)$/,    //压缩 js 与 css
        test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
        threshold: 10240,//只处理比这个值大的资源。按字节计算
        minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
    })
],
},
resolve:{
        extensions:['.js','.css','.json']  //用于配置程序可以自行补全哪些文件后缀
},
// gzip 压缩文件
///
// configureWebpack: (config) => {
//     // if (process.env.NODE_ENV === "production") {
//     //   // 生产环境
//     //   config.mode = "production";
//     // } else {
//     //   // 开发环境
//     //   config.mode = "development";
//     // }
//     // 忽略打包配置
//     if (isProduction) {
//       // 生产环境
//       //gzip压缩
//       const productionGzipExtensions = ['html', 'js', 'css']
//       config.plugins.push(
//         new CompressionWebpackPlugin({
//           filename: '[path].gz[query]',
//           algorithm: 'gzip',
//           // eslint-disable-next-line no-useless-escape
//           test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
//           threshold: 200, // 只有大小大于该值的资源会被处理 10240
//           minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
//           deleteOriginalAssets: false, // 删除原文件
//         })
//       )
//       // 公共代码抽离
//       config.optimization = {
//         //去掉console
//         minimizer: [
//           new TerserPlugin({
//             sourceMap: false,
//             terserOptions: {
//               compress: {
//                 drop_console: true
//               }
//             }
//           })
//         ],
//         // 分割代码块 chunk
//         splitChunks: {
//           cacheGroups: {
//             //公用模块抽离
//             common: {
//               chunks: 'initial',
//               minSize: 0, //大于0个字节
//               minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
//             },
//             //第三方库抽离
//             vendor: {
//               priority: 1, //权重
//               test: /node_modules/,
//               chunks: 'initial',
//               minSize: 0, //大于0个字节
//               minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
//             },
//           }
//         }
//       }
//     }
//     else {
//       // 开发环境
//       // config.mode = 'development';
//     }
//   },
///
optimization: {
    minimize: true,
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                warnings: false,
                compress: {
                    pure_getters: true,
                    unsafe: true,
                    unsafe_comps: true,
                    //screw_ie8: true, // no such option in uglify
                },
                output: {
                    comments: false,
                },
            },
            exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }),
    ],
},

};
但是当我npm run dev的时候，总是报错，如下：

C:\Users\Administrator\Desktop\gg\node_modules\compression-webpack-plugin\dist\index.js:283
      compilation.hooks.processAssets.tapPromise({
                                      ^
TypeError: Cannot read property 'tapPromise' of undefined

请问我的这个pugins应该放在哪里

回答：

应该放在和 module 同级。

pugins文件应该放在webconfig.js的那个地方，是module,还是什么？

  • 插件(plugins) | webpack 中文网

以上是 pugins文件应该放在webconfig.js的那个地方，是module,还是什么？ 的全部内容， 来源链接： utcz.com/p/935443.html

回到顶部