webpack 常用基础配置

一、常用配置项简要说明

  entry: //打包的入口文件，字符串/数组/对象
  output://配置打包的结果，对象
    fileName://定义输出文件名，字符串
    path://定义输出文件路径，字符串
  module: //定义对模块的处理逻辑，对象
    loader//数组
  resolve://影响对模块的解析，对象
    extensions://自动补全识别后缀，数组
  devServer://node.js构建用于构建本地服务器，对象
  devtool://生产Source Maps，字符串
  plugins://插件，数组

1、entry

1. 可以是字符串:这个字符串表示需要打包的模块的路径,如果只有一个要打包的模块，可以使用这种形式

2. 可以是数组:当需要将多个模块打包成一个模块，可以使用这个方式。如果这些模块之间不存在依赖，数组中值的顺序没有要求，如果存在依赖，则要将依赖性最高的模块放在最后面。
   例如：entry:["./app/one.js",".app/two.js"]

3. 可以是键值对形式的对象:当需要分别打包成多个模块时，可以使用这种方式，例如；

  entry:{
    module1:"./app/one.js",
    module2:["./app/two.js","./app/three.js"]
  }

注:当entry是一个键值对形式的对象时，包名就是键名，output的filename不能是一个固定的值，因为每个包的名字不能一样

字符串 或 数组内的文件将合并输出成一个js；对象形式会以key name 分别输出js

2、output

output:{

  publicPath://
  path:,//绝对路径，此路径是你希望一次性打包的目录
  fialname:"[name].js"//输出文件名
  crossOriginLoading:false//跨域加载
  filename://每个输出文件的名称
}```

 *__dirname，就是当前webpack.config.js文件所在的绝对路径
1. 它是一个对象
2. `path`:对应一个绝对路径，此路径是你希望一次性打包的目录
3. `publicPath`
在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置：
 __webpack_public_path__。
 
__webpack_public_path__ = myRuntimePublicPath
// 其他的应用程序入口

4. `filename`指定输出文件名。
 * 当输出一个文件时,filename为一个确定的字符串，如：
`output:{filename:"build.js"}`　　　　　　
 * 当输出多个文件，filename不能为一个确定的字符串。为了让每个文件有一个唯一的名字，需要用到下面的变量　　　　　　
`[id]` 会被chunk的id替换掉。 
`[name]` 会被chunk的name替换掉（如果没有名字，会被id替换）。 
`[hash]` 会被编译的hash替换掉。 
`[chunkhash]` 会被 chunk hash替换掉。
>`[hash]`和`[chunkhash]`的区别：chunkhash可以根据文件内容生成哈希值。
>不要在开发环境下使用 [chunkhash]，因为这会增加编译时间。将开发和生产模式的配置分开，并在开发模式中使用 [name].js 的文件名， 在生产模式中使用 [name].[chunkhash].js 文件名
>[具体查看](https://doc.webpack-china.org/guides/caching/)

5. `crossOriginLoading`此选项可以启用跨域加载(cross-origin loading) chunk。
  `false`- 禁用跨域加载
  `anonymous` - 启用跨域加载。当使用 anonymous时，发送不带凭据(credential)的请求。
  `use-credentials`- 启用跨域加载。发送带凭据(credential)的请求。
  >更多跨域加载信息请查看 [MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#attr-crossorigin)
  >默认值：false
  >参考 [library](https://doc.webpack-china.org/guides/author-libraries/)
  >参考 [开发工具](https://doc.webpack-china.org/guides/development/#choosing-a-tool)
6. 其他:[webpack2中文-output](https://doc.webpack-china.org/concepts/output/#-usage-)中获得更多的详细信息


####三、module
1. 为对象，定义对模块的处理逻辑　　　
2. [module.rules](https://doc.webpack-china.org/concepts/loaders/)允许你在 webpack 配置中指定几个 loader。它是一个数组，定义一系列loader，这个数组中的每一项都是一个对象loader:　

module: {
rules: [{
test: /.css$/,//（必须）正则表达式，用于匹配到的文件
use: [{
loader/loaders://（必须）loader的名称，字符串或者数组，处理匹配到的文件（处理原则从右至左）。如果只需要用到一个模块加载器则用loader：string，如果要使用多个模块加载器，则使用loaders：array
include/exclude://（可选）手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）；
query：//（可选）为loaders提供额外的设置选项
}]
}]
}

3.  module除了可以配置loaders以外还能配置其他的值,在[webpack的官网](http://webpack.github.io/docs/configuration.html#module)中获得更多的信息


####四、resolve
1. `extensions` ： 非必须，默认值`["", ".webpack.js", ".web.js", ".js"]`
  * 告诉解析器在解析中能够接受哪些扩展名
 * 数组中的空字符串是为了让每个模块都能够按照它们自己扩展名正确的被解析。　　　　
 * '.js'：请求js文件不带扩展（如：`require('somecode')`）　　　　
2. 其他:[webpack的官网](http://webpack.github.io/docs/configuration.html#resolve)获得更多信息

####五、devServer
1. 基于node.js构建用于构建本地服务器，安装依赖`npm install --save-dev webpack-dev-server`
2.  配置项说明：
       ```
   disableHostCheck: true//  --host 0.0.0.0 时，报 [invalid host header](https://segmentfault.com/a/1190000009425403)，需要改为true
  historyApiFallback: //在开发单页应用时，依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
  noInfo:// true,不加重一长串的打包信息
  contentBase//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
  host: '0.0.0.0',//
  port//默认'8080' 
  inline//设置为true，热加载
  colors//  设置为true，使终端输出的文件为彩色的

*也可在package里的script里设置 *

六、devtool

1. 生成Source Maps（使调试更容易）
2. 在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

source-map//在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；
cheap-module-source-map//在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map//使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
cheap-module-eval-source-map//这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它，
cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑da时间成本是使用。

七、plugins

1. 用来拓展Webpack功能。
2. 与loader的区别：loaders是在打包构建过程中处理源文件（JSX，Scss，Less..），插件不直接操作单个文件，它直接对整个构建过程其作用。