1、缩小范围，配置resolve参数

1.1 extensions: 配置后缀名

配置后缀名，即可在require或是import引用文件时不写后缀名，自动进行依次匹配

resolve: { extensions: [".js",".jsx",".json",".css"] },

1.2 alias：配置别名

配置别名，便于引用，可以加快webpack查找模块的速度

// 每当引入bootstrap模块的时候，它会直接引入`bootstrap`,而不需要从`node_modules`文件夹中按模块的查找规则查找
const bootstrap = path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: { + alias:{ + bootstrap + } },

1.3 moudules: 配置第三方模块所在目录

配置第三方模块所在目录，便于引用

resolve: {
    modules: ['node_modules'],
}

1.4 mainFields: 配置第三方入口

www.jianshu.com/p/ace0c01e8… 默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件各种第三方插件的package.json都会入口文件配置，根据所处环境有不同的入口,如：

{
  "browser": "fetch-npm-browserify.js",
  "main": "fetch-npm-node.js"
}

mainFields的设置旨在减少搜索步骤，在你明确第三方模块的入口文件描述字段时，你可以把它设置的尽量少。

使用本方法优化时，你需要考虑到所有运行时依赖的第三方模块的入口文件描述字段，就算有一个模块搞错了都可能会造成构建出的代码无法正常运行。

resolve: {
    // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是:
    mainFields: ['browser', 'module', 'main'],
    // target 的值为其他时，mainFields 默认值为：
    mainFields: ["module", "main"]
}

1.5 mainFiles：配置第三方入口

当插件中没有package.json时，默认走插件的index.js，此默认入口文件可以更改

resolve: {
    // 你可以添加其他默认使用的文件名
    mainFiles: ['index'],
},

1.6 resolve配置主要有两个部分

一个是用于配置（resolve）从用户定义的入口文件解析依赖的模块，另一个（resolveLoader）仅用于解析 webpack 配置的需要的 loader 包。两个配置大同小异，理解一个，另外一个基本都可以了。

2、noparse 无依赖的第三方库

module.noParse 字段,不需要解析依赖（即无依赖）的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度。

使用 noParse 进行忽略的模块文件中不能使用 import、require、define 等导入机制

module.exports = {
    // ...
    module: {
        noParse: /jquery|lodash/,
        // 正则表达式
        // 或者使用函数
        noParse(content) {
            return /jquery|lodash/.test(content)
        },
    }
}...

3、IgnorePlugin 忽略模块部分内容

IgnorePlugin用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去

如： moment中语言包过大，我们仅需中文的，即可在中配置

// webpack.config.js
new webpack.IgnorePlugin({
    // 匹配引入模块路径的正则表达式
    contextRegExp: /moment$/,
    // 匹配模块的对应上下文，即所在目录名
    resourceRegExp: /^\.\/locale/ //忽略包中的locale文件夹
})

// src/index.js
import moment from 'moment';
// 手动引入语言包
import 'moment/locale/zh-cn'

4、speed-measure-webpack-plugin 各文件耗时

速度衡量插件，方便观察各插件的市场在这里插入图片描述

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({ });

5、webpack-bundle-analyzer 生成热图

是一个webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告，帮助提升代码质量和网站性能

用于分析编译过程生成哪些文件，生成热图

cnpm i webpack-bundle-analyzer -D

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); 
module.exports={ plugins: [ new BundleAnalyzerPlugin() ] }

webpack优化（未完待续...）