webpack-opt

resolve

// resolve 配置 webpack 如何寻找模块所对应的文件
resolve: {
  // 在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在
  extensions: [],
  // 通过别名来把原导入路径映射成一个新的导入路径
  alias: {
    comonents: './src/components/'
  },
  // modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去  node_modules  目录下寻找
  modules: ['./src/components','node_modules']
}

modules

有时项目当中会有一些模块被大量 被其他模块依赖和导入，由于其他模块的位置分布不定，针对不同的文件都要去计算被导入文件的相对路径，
这个路径有时候会很长，如：import Button from '../../../components/button'，
这时可以通过 webpack 进行优化，假如那些被大量导入的模块都在 ./src/components/ 目录下，通过 webpack 配置

resolve: {
  // modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去  node_modules  目录下寻找
  modules: ['./src/components','node_modules']
}

之后，可以简单的通过 import 'button' 导入

mainFields

此选项就是在 package.json 文件不存在或者 package.json 文件中的 main 字段没有返回一个有效路径，则按照顺序查找 resolve.mainFields 配置选项中指定的文件名，看是否能在 import/require 目录下匹配到一个存在的文件名。

有一些第三方模块会针对不同环境提供几分代码。 例如分别提供采用 ES5 和 ES6 的2份代码，这2份代码的位置写在 package.json 文件里，如下：

{
  "jsnext:main": "es/index.js",// 采用 ES6 语法的代码入口文件
  "main": "lib/index.js" // 采用 ES5 语法的代码入口文件
}

Webpack 会根据 mainFields 的配置去决定优先采用那份代码， mainFields 默认如下：

mainFields: ['browser', 'main']

Webpack 会按照数组里的顺序去 package.json 文件里寻找，只会使用找到的第一个。

假如你想优先采用 ES6 的那份代码，可以这样配置：

mainFields: ['jsnext:main', 'browser', 'main']

plugins

• clean-webpack-plugin 清理指定文件(夹)
• html-webpack-plugin 指定编译模板 .html 文件，此后基于这个文件来编译

devServer

devServer: {
  // 本地开发服务 基于 dist 目录 运行
  /*
      webpack5 已废弃
  */
  contentBase: './dist',
  static: {
    directory: path.join(__dirname, 'public'),
  },
  // ,     // 服务启动后的打印信息
  compress: false,          // 不启用压缩
  host: 'localhost',
  port: 5000
}

// 已更改的配置项 1. devServer.stats : 
devServer: {
  stats: 'errors-only'
}

// 新
// 在根配置
module.exports = {
  stats: 'errors-only'
}

// 已更改的配置项 2. contentBase : 
contentBase: './dist',
// 新配置
static: {
  directory: path.join(__dirname, 'dist'),
},
// 或
static: './dist'

问题 1. 热更新失效

// webpack.config.js
module.exports = {
 // target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist',
  target: 'web',
}

// package.json
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firfox version",
      "last 1 safary version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

自动编译，HMR 启动，页面依旧不更新