说明
玩转 webpack 学习笔记
目的
目的：尽可能的少构建模块
比如 babel-loader 不解析 node_modules
减少文件搜索范围
- 优化
resolve.modules配置（减少模块搜索层级） - 优化
resolve.mainFields配置 - 优化
resolve.extensions配置 - 合理使用 alias
module.exports = { resolve: { alias: { react: path.resolve(__dirname, './node_modules/react/dist/react.min.js'), }, modules: [path.resolve(__dirname, 'node_modules')], extensions: ['.js'], // 表示在 import 文件时文件后缀名可以不写 mainFields: ['main'], // 当从 npm 包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块。 } };
实战
先不缩小构建目标，然后运行 npm run build
然后添加缩小目标的配置
{ test:/.js$/, include: path.resolve("src"), use: [ // { // loader: 'thread-loader', // options: { // workers: 3 // } // }, // 'babel-loader', 'happypack/loader', // 'eslint-loader' ] },
resolve: { alias: { 'react': path.resolve(_dirname, './node_modules/react/umd/react.production.min.js'), 'react-dom': path.resolve(_dirname, './node_modules/react-dom/umd/react-dom.production.min.js'), }, extensions: ['.js'], // 表示在 import 文件时文件后缀名可以不写 mainFields: ['main'], // 当从 npm 包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块。 }
下面运行打包命令，可以看到速度还是有一些提升的。
