【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导出为多种类型：

---

output

---

module--rule--loader

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

---

解析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

---

devServer

webpack-dev-server 可以用于快速开发应用程序

下面就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。
复制代码

---

其余配置

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