一步步讲解如何配置和使用 webpack。

目录速览

参考链接

使用 webpack-bundle-analyzer 观察打包情况

安装:

1
$ yarn add --dev webpack-bundle-analyzer

填写配置:

1
2
3
4
5
6
7
8
9
10
// webapck.config.js
var WebpackBundleAnalyzer = require('webpack-bundle-analyzer');
module.exports = {
// ...
plugins: [
new WebpackBundleAnalyzer({
// 自定义配置,详情看上方的参考链接
}),
],
};

使用 webpack-dashboard 可视化整理webpack输出信息

安装:

1
$ yarn add ---dev webapck-dashboard

填写配置:

1
2
3
4
5
6
7
8
9
10
// webapck.config.js
var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();
module.exports = {
// ...
plugins: [
new DashboardPlugin(dashboard.setData),
],
};

注意:

  1. 需要在webpack.config.js中的devServer选项配置中设置静默模式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // webapck.config.js
    module.exports = {
    // ...
    devServer: {
    hot: true,
    quiet: true, // 不输出相关信息,以防阻碍dashboard的显示
    historyApiFallback: true,
    }
    }
  2. 如果使用的时OSX自带的终端Terminal,请确认”View -> Allow Mouse Reporting”是使能(Enable)状态;如果所用终端没有该功能,推荐使用iTerm2