noParse 不解析没有依赖的库

module 的 noParse 选项可以指定模块不进行依赖库的解析，直接进引入，加快打包速度；适用于引入一些没有依赖的独立的第三方库（例如 jquery）

正常引用 jquery import jq from jquery 时，会解析 jquery 库有没有依赖的包；设置 noParse 属性后，忽略解析，直接打包

Javascript

module.exports = {
  module:{
    noParse: /jquery/, // jquery中没有依赖，所有不用解析
  }
}

loader 解析时排除和指定目录

解析文件时，例如所有 js 文件，会默认查找 /node_modules/ 目录，exclude 选项可以排除查找目录；include 选项可以指定查找目录；两者使用一个即可，都可以缩小解析范围

Javascript

module.exports = {
  module: {
    noParse: /jquery/, // jquery 独立的库，没有依赖，不去解析
    rules:[
      {
        test: /\.js$/,
        include: path.resolve('src'), // 只去src目录查找
        // exclude: /node_modules/, // 忽略node_modules目录
        use:{
          loader: 'babel-loader',
          options:{
            presets:['@babel/preset-env','@babel/preset-react']
          }
        }
      }
    ]
  }
}

webpack IgnorePlugin 忽略第三方包的指定目录

IgnorePlugin 是 webpack 自带插件，作用是打包时忽略第三方包的指定目录

例如：安装引入 moment 包，这个库主要用来对时间进行格式化处理，支持多个语言

引入 moment 并使用：

Javascript

import moment from 'moment'

// 设置语言
moment.locale('zh-cn')
let r = moment().endOf('day').fromNow()
console.log(r)

此时引入了整个 moment 模块，虽然实际只使用了中文模块 moment/locale/zh-cn，但 moment/locale/下的所有语言模块也都打包进去了

使用 webpack.IgnorePlugin，设置在引入 moment 模块时，忽略 moment 下./loacle目录下的子模块

Javascript

let webpack = require('webpack')
module.exports = {
	plugins:[
    new webpack.IgnorePlugin(/\.\/locale/,/moment/)
  ]
}

上面这样设置后，就无法使用所有的语言模块了，为了使用中文模块需要手动引入；这样既实现了功能，由减少了打包体积

Javascript

import moment from 'moment'
// 引入中文模块
import 'moment/locale/zh-cn'

// 设置语言
moment.locale('zh-cn')
let r = moment().endOf('day').fromNow()
console.log(r)