# 配置

# webpack-dev-server

yarn add -D webpack-dev-server

module.exports = {
    devServer: {
        port: 3000,
        quiet: true, // webpack的错误或警告在控制台不可见
        inline: true,
        stats: 'errors-only' // 只打印error信息,
        overlay: false, // 编译出错，全屏显示错误
        clientLogLevel: 'none', // 日志级别
        compress: true, // gzip压缩
        hot: true // 热更新
    },
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# devtool

source-map：源码映射，会产生额外的文件，标识当前错误的列和行
eval-source-map：不会产生额外的文件，集成到文件中，标识当前错误的列和行
cheap-module-source-map：会产生额外的文件，可以保留起来
cheap-module-eval-source-map：不会产生额外的文件，集成到文件中，只标识当前错误的行

# 多页打包

module.exports = {
    entry: {
        home: './public/index.js',
        other: './public/other.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', 
            chunks: ['home'] // 只引入相应的js文件
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'other.html',
            chunks: ['other']
        })
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# resolve配置

配置模块如何解析。例如，当在 ES2015 中调用 import "lodash"``，resolve 选项能够对 webpack 查找 "lodash" 的方式去做修改。

modules

告诉 webpack 解析模块时应该搜索的目录。

module.exports = {
    resolve: {
        modules: ['./src/components', 'node_modules'] //从左到右依次查找
    }
}

这样配置之后，我们 `import Dialog from 'dialog'`，会去寻找 `./src/components/dialog`，不再需要使用相对路径导入。如果在 `./src/components` 下找不到的话，就会到 `node_modules` 下寻找。

1
2
3
4
5
6
7
8

alias

创建 import 或 require 的别名，来确保模块引入变得更简单。

function resolve (dir) {
    return path.join(__dirname, '..', dir)
}
alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
}

1
2
3
4
5
6
7

extensions

//webpack.config.js
module.exports = {
    //....
    resolve: {
        extensions: ['.js', '.css', 'json']
    }
}

1
2
3
4
5
6
7

enforceExtension

true：文件后缀不能缺省

mainFields：主入口字段

当从 npm 包中导入模块时（例如，import * as D3 from "d3"），此选项将决定在 package.json 中使用哪个字段导入模块。

默认值：mainFields: ["browser", "module", "main"]

例如，D3 的 package.json 含有这些字段：

{
    main: 'build/d3.Node.js',
    browser: 'build/d3.js',
    module: 'index',
}

1
2
3
4
5

# webpack-merge

const merge = require('webpack-merge');
merge({
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {a: 1}
        ]
    },
    plugins: [1,2,3]
}, {
    devtool: 'none',
    mode: "production",
    module: {
        rules: [
            {a: 2},
            {b: 1}
        ]
    },
    plugins: [4,5,6],
});
//合并后的结果为
{
    devtool: 'none',
    mode: "production",
    module: {
        rules: [
            {a: 1},
            {a: 2},
            {b: 1}
        ]
    },
    plugins: [1,2,3,4,5,6]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 跨域

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有用。

module.exports = {
    //...
    // 模拟数据
    before(app) {
        app.get('/api/user', function(req, res) {
            res.json({ name: 'response' });
        });
    },
    devServer: {
        proxy: {
            // "/api": "http://localhost:3000"
            "/api": {
                target: "http://localhost:3000",
                pathRewrite: { "^/api" : "" }, // 重写请求路径 '/api/user' => 'http://localhost:3000/user'
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf("html") !== -1) {
                        console.log("Skipping proxy for browser request.");
                        return "/index.html";
                    }
                }
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 实时编译打包

module.exports = {
    watch: true,
    watchOptions: {
        poll: 1000,
        aggregateTimeout: 500, // 防抖
        ignored: /node_modules/
    }
}

1
2
3
4
5
6
7
8

← Webpack4.0 loader →