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"
  },