Webpack

Configuration

context

entry 的基本目录。默认是process.cwd()

entry

解析的入口文件。

1
2
3
4
5
6
7
8
9
10
{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        filename      : "[name].bundle.js",
        chunkFilename : "[id].bundle.js"
    }
}

output

打包后的文件名。

可替代变量名：[hash]这次打包的哈希值,[name],[chunkhash]文件哈希值。

打包文件放置的绝对路径。

可替代变量名：[hash]。

输出的文件在浏览器中的公共路径URL。

比如加载器loader解析后的内联标签<script>,<link>，文件中的src,url()等，当静态文件部署在cdn中的时候，这个参数非常有用。可替代变量名：[hash]。

非入口文件相对于output.path的路径。

可替代变量名：[id],[name],[hash],[chunkhash]。

代码映射文件的文件名。

可替代变量名：[id],[name],[hash]。Default: "[file].map"。

是否开启模块的注释。

Default: false。

库文件的导出（export）变量名。

如果设置了该参数，则会把输出当做一个库文件（library）。

对于公共文件（如react）打包成库文件是一个比较好的选择。

库文件的导出（export）格式。

Default: "var"。

type value resulting import code
var ‘abc’ module.exports = abc;
var ‘abc.def’ module.exports = abc.def;
this ‘abc’ (function() { module.exports = this[‘abc’]; }());
this [‘abc’, ‘def’] (function() { module.exports = this[‘abc’][‘def’]; }());
commonjs ‘abc’ module.exports = require(‘abc’);
commonjs2 [‘abc’, ‘def’] module.exports = require(‘abc’).def;
amd ‘abc’ define([‘abc’], function(X) { module.exports = xxx; })
umd ‘abc’ everything above

跨域加载文件参数。false (default) | anonymous | use-credentials

1
2
3
4
5
6
7
output: {
    filename   : '[name].[hash:3].js',
    path       : path.join(__dirname, 'static'),
    publicPath : path.join(__dirname, 'static'),
    pathinfo   : true,
    library    : 'library.[hash:3]',
}

module

定义对模块处理的工具和逻辑。

自动加载的转换非 javascript 文件的模块，如 css-loader, jsx-loader 等。

webpack 只能解析 javascript 语法，所以要通过 loader 转换成 javascript 可解析的内容。

参数 解释
test 匹配文件名，String｜RegExp｜Mixed with ‘and’
exclude 排除目录
include 包含目录
loader loader 列表字符串，通过 ! 连接，加载顺序从右至左
loaders loader 列表数组

module.loaders 加载之前加载的 loaders。

匹配不进行 loader 解析的文件。RegExp|[RegExp]

1
2
3
4
5
6
7
8
9
10
11
module: {
    loaders: [
        {
            test   : /\.styl$/,
            loader : 'css!stylus'
        }
    ],
    noParse: [
        /test\.styl/
    ]
}

resolve

官方文档

定义模块别名字典（替代名）。

当以 $ 结尾时，只有完全匹配才会被替代。

alias require(‘xyz’) require(‘xyz/file.js’)
{ xyz: “modu” } node_modules/modu/index.js node_modules/modu/file.js
{ xyz$: “modu” } node_modules/modu/index.js node_modules/xyz/file.js
{ xyz: “modu/dir” } node_modules/modu/dir/index.js node_modules/dir/file.js
{ xyz$: “modu/dir” } node_modules/modu/dir/index.js node_modules/modu/file.js

模块搜索的 绝对路径（数组）。

辨析：当需要层级搜索的时候，用 resolve.modulesDirectories

模块搜索的 文件夹（数组）。

搜索的方式与 nodejs 一样：’./node_modules’, ‘../node_modules’ … 。

Default: [“web_modules”, “node_modules”]

也是搜索模块的绝对路径（数组）。

当 resolve.root 和 resolve.modulesDirectories 均没有找到的时候在该目录搜索。

搜索模块时匹配的后缀名（数组）。

Default: [‘’, ‘.webpack.js’, ‘.web.js’, ‘.js’]。

设置该参数的时候将会覆盖默认参数，并且要使require('./index.js')可以被正确引入，则必须加入空字符串 ‘’。

1
2
3
4
5
6
7
8
9
10
11
resolve: {
    alias: {
        jquery: './lib/jquery.js'
    }，
    root: [
        path.resolve('./app/modules'),
        path.resolve('./vendor/modules')
    ],
    modulesDirectories: ['node_modules', 'web_modules'],
    extensions: ['', '.js', '.styl', '.css'],
}

resolveLoader

针对 loaders 的 resolve，拥有 resolve 的全部参数。

loaders 名的匹配模板（数组）。

Default: [‘*-webpack-loader’, ‘*-web-loader’, ‘*-loader’, ‘*‘]

externals

指定不需要被 webpack 打包的依赖。

依赖的类型由 output.libraryTarget 决定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    output: { libraryTarget: "commonjs" },
    externals: [
        {
            a: false, // a is not external
            b: true, // b is external (require("b"))
            "./c": "c", // "./c" is external (require("c"))
            "./d": "var d" // "./d" is external (d)
        },
        // Every non-relative module is external
        // abc -> require("abc")
        /^[a-z\-0-9]+$/,
        function(context, request, callback) {
            // Every module prefixed with "global-" becomes external
            // "global-abc" -> abc
            if(/^global-/.test(request))
                return callback(null, "var " + request.substr(7));
            callback();
        },
        "./e" // "./e" is external (require("./e"))
    ]
}

target

定义打包后的代码运行的环境。默认为 浏览器或类浏览器 环境。

类型 解释
‘web’ Compile for usage in a browser-like environment (default)
‘webworker’ Compile as WebWorker
‘node’ Compile for usage in a node.js-like environment (use require to load chunks)
‘async-node’ Compile for usage in a node.js-like environment (use fs and vm to load chunks async)
‘node-webkit’ Compile for usage in webkit, uses jsonp chunk loading but also supports builtin node.js modules plus require(“nw.gui”) (experimental)
‘electron’ Compile for usage in Electron – supports require-ing Electron-specific modules.

bail

Report the first error as a hard error instead of tolerating it.

profile

捕获模块时间信息。

cache

缓存模块以提高性能，在 dev 模式下默认打开。

watch

进入监视模式。

watchOptions

设置打包延时时间（ms）。

Default: 300

>

debug

将 loader 切换到 debug 模式。

devtool

设置 debug 工具。

devtool build speed rebuild speed production supported quality
eval +++ +++ no generated code
cheap-eval-source-map + ++ no transformed code (lines only)
cheap-source-map + o yes transformed code (lines only)
cheap-module-eval-source-map o ++ no original source (lines only)
cheap-module-source-map o - yes original source (lines only)
eval-source-map - + no original source
source-map - - yes original source

loader

提供给 加载器 上下文的自定义值。

plugins

插件模块介绍

给整个编译提供的插件模块。

注意：加载器 和 插件 的不同。前者只是将非 javascript 资源转换成 javascript 内容；后者则是对 javascript 代码的逻辑处理。