webpack4学习之路-7-优化操作

在此之前我主要的笔记是说明对webpack的操作，接下来我会主要记录对webpack 的优化

noParse

我们在index.js文件中引入JQimport jquery from jquery这样的命令webpack解析到这一句的时候，会默认进入JQ文件继续解析，看看有没有其他的依赖，但是我们知道JQ里并不包含其他依赖，于是我们可以配置参数来让webpack不去解析JQ文件中是否有其他依赖。以此来提升打包速度。

module: {
   
    noParse: /jquery/,//不去解析jquery中的依赖项，如果我们事先知道该模块中没有其他依赖，我们可以不去解析它，来提升打包速度
    rules: [{
   
        test: /\.js$/,
        use: [{
   
            loader: 'babel-loader',
            options: {
   
                presets: ['@babel/preset-env']
            }
        }]
    }]
},

include&&exclude

我们在module中写rules的时候，可以指定要检查的目录，比如找js文件只在src中寻找就可以了，还可以把node_modules排除

rules: [{
   
    test: /\.js$/,
    use: [{
   
        loader: 'babel-loader',
        options: {
   
            presets: ['@babel/preset-env']
        }
    }],
    exclude: /node_modules/,
    include: path.resolve('src')
}]

IgnorePlugin

我们使用了moment来处理时间，但是这样的包中包含语言包，各种语言都有，在我们打包的时候会导致文件不必要的变大，因此我们应该按需引入，使用的是webpack自带的插件IgnorePlugin

-index.js

import jquery from 'jquery'
import moment from 'moment'

console.log('hello world');
//设置语言
//config文件中忽略了locale，需要按需引入
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
let r = moment().startOf('hour')<