# 配置

# 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

创建 importrequire 的别名,来确保模块引入变得更简单。

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"]

例如,D3package.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