webpack填坑之路

前言

从一个二线城市来到北京，工作模式很不一样，也有许多需要掌握的知识与工具，不过这也正是我来北京的原因。此文中大部分内容都是webpack官方文档上摘过来的，仅仅是对自己理解薄弱的地方加以整理和归纳，加深自身印象。对其他人的参考意义不大。

生产环境搭建

在开发环境中，我们需要更强大的、实际重新加载(live reloading)或者热模块替换(hot module replacement)能力的sourcemap和locahost server。在生产环境中，我们的目标则转向关于更小的bundle，更轻量的sourcemap，以及更优化的资源，建议为每个环境编写彼此独立的webpack配置。

首先安装webpack-merge,通过它我们可以将开发环境与生产环境中相同的配置单独摘离出来共同使用，而不必重复配置。

npm install --save-dev webpack-merge

然后我们可以定义以下三个配置文件：
webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
});

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

1. UglifyJSPlugin是一个能够删除未引用代码(dead code)的压缩工具(minifier)
2. 避免在生产环境中使用inline-**和eval-**，因为它们可以增加bundle大小，并降低整体性能。
3. 通过在webpack.prod中定义的变量process.env.NODE_ENV可以判断当前是生产环境还是开发环境，可以再index.js里这样调用：

if (process.env.NODE_ENV !== 'production') {
    console.log('Looks like we are in development mode!:)');
}else{
    console.log('Looks like we are in production mode!:)');
}

然后在package.json中作如下定义并运行查看：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js --watch"
  },