【webpack】配置

配 置|webpack中文网

使用不同语言配置js/ts/coffee：

• 为了用 TypeScript 书写 webpack 的配置文件，必须先安装相关依赖：

npm install --save-dev typescript ts-node @types/node @types/webpack

• 类似的，为了使用 CoffeeScript 来书写配置文件, 同样需要安装相关的依赖：

npm install --save-dev coffee-script

---

module.exports导出为多种类型：

image

---

output

image

---

module--rule--loader

module主要是根据rule（规则）来配置loader（插件）

image

---

解析resolve

中文官网：解析(resolve)

webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。

下面介绍几个常用的配置项

1.alias：配置项通过别名来把原导入路径映射成一个新的导入路径。

• 例如使用以下配置：

resolve:{
  alias:{
    components: './src/components/'
  }
}

• 当你通过 import Button from 'components/button' 导入时，实际上被 alias 等价替换成了 import Button from './src/components/button'
• 配置根目录

resolve:{
  alias:{
    '@': resolve('src'),
  }
}

• 还有很多种配置方式，请参看官网

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

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

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

mainFields: ['browser', 'main']

• Webpack 会按照数组里的顺序去 package.json 文件里寻找，只会使用找到的第一个。
• 假如你想优先采用 ES6 的那份代码，可以这样配置：

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

3.extensions：在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

extensions: ['.js', '.json']

• 也就是说当遇到 require('./data') 这样的导入语句时，Webpack 会先去寻找 ./data.js 文件，如果该文件不存在就去寻找 ./data.json 文件， 如果还是找不到就报错。
• 假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置：

extensions: ['.ts', '.js', '.json']

4.modules：resolve.modules 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去 node_modules 目录下寻找。

• 有时你的项目里会有一些模块会大量被其它模块依赖和导入，由于其它模块的位置分布不定，针对不同的文件都要去计算被导入模块文件的相对路径，这个路径有时候会很长，就像这样 import '../../../components/button' 这时你可以利用 modules 配置项优化，假如那些被大量导入的模块都在 ./src/components 目录下，把 modules 配置成

modules:['./src/components','node_modules']

• 后，你可以简单通过 import 'button' 导入。

5.descriptionFiles：
resolve.descriptionFiles 配置描述第三方模块的文件名称，也就是 package.json 文件。默认如下：

descriptionFiles: ['package.json']

6.enforceExtension：如果配置为 true 所有导入语句都必须要带文件后缀， 例如开启前 import './foo' 能正常工作，开启后就必须写成 import './foo.js'

7.enforceModuleExtension：和 enforceExtension 作用类似，但它只对 node_modules 下的模块生效。

• 通常搭配 enforceExtension 使用，在 enforceExtension:true 时，因为安装的第三方模块中大多数导入语句没带文件后缀， 所以这时通过配置 enforceModuleExtension:false 来兼容第三方模块。

---

插件plugins

---

优化(optimization)

从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，不过所有的优化还是可以手动配置和重写。

---

devServer

webpack-dev-server 能够用于快速开发应用程序

image
下面就proxy做个解释：

• 假设你主机名为 localhost:8080 , 请求 API 的 url 是 http://your_api_server.com/user/list
• '/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http://localhost:8080/proxy/user/list 。
• changeOrigin：如果 true ，那么 http://localhost:8080/proxy/user/list 变为 http://your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
• pathRewrite：重写路径。匹配 /proxy ，然后变为''，那么 url 最终为 http://your_api_server.com/user/list 。

---

devtool

此选项控制是否生成，以及如何生成 source map。

7中SourceMap模式

模式	解释
eval	每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
source-map	生成一个SourceMap文件.
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap
cheap-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

- 注1：webpack 不仅支持这 7 种，
而且它们还是可以任意组合上面的eval、inline、hidden关键字，
就如文档所说，你可以设置 souremap 选项为:
    cheap-module-inline-source-map。

- 注2：如果你的modules里面已经包含了SourceMaps，
你需要用source-map-loader 来和合并生成一个新的 SourceMaps。

---

统计信息stats

即：构建时命令行的日志显示方案

---

其他配置

1. 构建目标(targets)告知 webpack 为目标(target)指定一个环境。默认为web：编译为类浏览器环境里可用。
2. 监听模式（watch）默认为false；若为true,则可配置watchOptions
3. 外部扩展(externals)：配置选项提供了「从输出的 bundle 中排除依赖」；可将公共模块如loadsh/jquery等配置在这里
4. 性能(performance)：配置如何展示性能提示
5. 其他......