webpack 配置

module

noParse

防止 webpack 解析与给定的正则表达式相匹配的文件，忽略大型的 library 可以提高构建性能。忽略的文件中不应含有 import、require、define的调用，或任何其他导入机制。

noParse: /jquery|lodash/

noParse: function(content) {
  return /jquery|lodash/.test(content)
}

rule

条件	意义
{ test: Condition}	匹配特定条件（非强制），正则表达式/正则表达式数组
{ include: Condition}	匹配特定条件（非强制），字符串/字符串数组
{ exclude: Condition}	排除特定条件（非强制），字符串/字符串数组
{ and: Condition}	必须匹配数组中的所有条件
{ or: Condition}	匹配数组中任何一个条件
{ not: Condition}	必须排除这个条件

每个选项都接收一个正则表达式或字符串，test 和 include具有相同的作用，是必须匹配选项，exclude是必不匹配选项，优先于test 和 include。最佳实践：

• 只在 test 和文件匹配名中使用正则表达式
• 在 include 和 exclude 中使用 绝对路径数组
• 尽量避免 exclude，倾向于使用 include

rules: [
    {
      test: /\.jsx?$/,
      include: [
        path.resolve(__dirname, "app")
      ],
      exclude: [
        path.resolve(__dirname, "app/demo-files")
      ],
    }
  ]

模块解析

resolver是一个库，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖块被引用

import foo from 'path/to/module'
require('path/to/module')

所依赖的模块可以是来自应用程序或第三方的库。resolver帮助 webpack找到 bundle中需要引入的模块代码这些代码包含在每个 require/import语句中。当打包模块时，webpack使用enhanced-resolve来解析文件路径。

output

crossOriginLoading

适用于 target是 web，通过添加 script标签，使用 JSONP 按需加载 chunk。可以设置的值

• crossOriginLoading: false： 默认，禁用跨域加载
• crossOriginLoading: "anonymous": 不带凭据使用跨域加载
• crossOriginLoading: "use-credentials" 带凭据启用跨域加载 with credentials

filename

定义每个输出 bundle的名称，这些 bundle将写入output.path选项指定的目录下。这个配置不会影响【按需加载 chunk】的输出文件，对于这些文件，使用output.chunkFilename选项来控制输出。

• 对于单个入口起点，filename是一个静态名称

filename: "bundle.js"

• 当通过多个入口起点、代码拆分、或各种插件创建多个bundle，应该使用替换方式，赋予每个 bundle 唯一的名称

filename: "[name].bundle.js" // 使用入口名称
filename: "[id].bundle.js" // 使用内部 chunkid
filename: "[name].[hash].bundle.js" // 使用每次构建过程中，唯一的 hash生成
filename: "[chunkhash].bundle.js" 

可以使用以下模板字符串

模板	描述
[hash]	模块标识符的 hash
[chunkhash]	chunk内容的 hash
[name]	模块名称
[id]	模块标识符
query	模块的query

publicPath

用于指定输出文件夹的路径，官方文档称，用于指定在浏览器中所引用的【此输出目录对应的公开 url】，未做任何设置时，URL 默认以 HTML 页面为基准。

sourceMapFilename

向硬盘写入一个输出文件，只在 devtool 启用了 SourceMap 选项时使用。配置 SourceMap的命名方式，默认使用[file].map

resolve

配置模块如何解析。

alias

创建 import 和 require的别名，在 import 时使用相对路径时，可以使用别名。

alias: {
  Template: path.resolve(__dirname, 'src/templates')
}

extension

自动解析确定的扩展

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

devtool

选项用于控制是否生成及如何生成 source map