10天掌握webpack 4.0 优化篇 (4) IgnorePlugin
IgnorePlugin用于忽略某些特定的模块,让 webpack 不把这些指定的模块打包进去
测试例子:
src/index.js
import moment from 'moment' moment.locale('zh-cn') let date = moment().startOf('hour').fromNow(); // 7 分钟前 console.log(date)
打包
包的体积差不多为 1000kib
这个时候我们测试使用 IgnorePlugin 来忽略 moment 的语言包
const path = require('path') let webpack = require('webpack') let htmlWebpckPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new htmlWebpckPlugin({ template: './public/index.html' }), new webpack.IgnorePlugin(/^\.\/locale/, /moment$/) ], module: { noParse: /jquery|lodash/, // 正则表达式 rules: [ { test: /\.js?$/, include: path.join(__dirname, 'src'), exclude: /node_modules/, use: { loader: 'babel-loader', options: { "presets": [ "@babel/preset-env", "@babel/preset-react", ] } } } ] }, }
再次打包测试
体积明显减少 效果明显
测试代码 : webpack-dev-3 文件夹下
https://gitee.com/guangzhou110/ten-days_to_master_webpack4/tree/master/webpack-dev-3
越努力越幸运