webpack5 IgnorePlugin和noParse

一、IgnorePlugin

1. 作用

· 处理时间的lib  import moment from moment

· 默认会引入所有js代码，代码过大

· 如何只引入需要的模块

2. 配置

// webpack.prod.js

module.exports = merge(webpackCommonConf, {
     
    // ...

    plugins: [
       
        // ...

        // 忽略 moment 下的 /locale 目录
        new webpack.IgnorePlugin({
            resourceRegExp: /^\.\/locale$/,
            contextRegExp: /moment/,
        }),
        
        // ...
        
    ],

   
    // ...
})

二、noParse避免重复打包

配置

// webpack.prod.js

module.exports = merge(webpackCommonConf, {
      
  // ...
  Ï
  Ïmodule: {
   

    // react.min.js 没有采取模块化的打包
    // 忽略对 react.min.js 递归解析处理
    noParse: /react.min.js/,
    
  },
  
    
   // ...
});

三、IngorePlugin与noParse对比

1、ignorePlugin直接不引入，代码中没有

2、noParse引入，但不打包