《兼容开发和生产环境的配置文件》

    1、process.env.NODE_ENV：node运行环境变量。

    process.env.NODE_ENV是node运行时的全局变量，node服务端中的任一js文件中都可以拿到它的值，先来试试是否真的能获取到值
    先新建一个lesson3的项目，再创建一个test.js文件

    copy以下代码到test.js

    输出结果是development，棒！
    上一节lesson2遗留下来的问题是使用了开发模式后（webpack-dev-server），webpack打包时会把html和css文件、webpack-dev-server开发文件、webpack.HotModuleReplacementPlugin()插件统统打包到了webpack.bundle.js文件中，而在lesson1的生产模式中我们的确成功打包出理想状态的文件。思考一下，咱们是不是可以这么操作，通过获取NODE_ENV的值，判断当前命令的环境是开发还是生产环境，如果是生产环境，咱们就使用extract-text-webpack-plugin抽取css代码块、删除webpack.entry.js中的require('index.html')和webpack-dev-server入口、以及删除对HotModuleReplacementPlugin插件的引入，否则，相反。
    okay，npm初始化下、安装各个npm包

    1. npm init -y
    2. npm install webpack webpack-dev-server css-loader extract-text-webpack-plugin file-loader html-loader html-webpack-plugin style-loader url-loader --save-dev
    3. npm install jquery --save

    配置package.json命令行

    copy以下代码到webpack.config.js

    1. var path = require('path'),
    2. HtmlWebpackPlugin = require('html-webpack-plugin'),
    3. webpack = require('webpack'),
    4. ExtractTextPlugin = require("extract-text-webpack-plugin");
    6. module.exports = {
    7.   entry: process.env.NODE_ENV === 'production' ? './webpack.entry.js': ['webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './webpack.entry.js'],
    8.   output: {
    9.     filename: 'webpack.bundle.js',
    10.     path: path.resolve(__dirname, './build'),
    11.     publicPath: ''
    12.   },
    13.   context: __dirname,
    14.     rules: [{
    15.       test: /\.css$/,
    16.       use: process.env.NODE_ENV === 'production' ? ExtractTextPlugin.extract({
    18.         use: "css-loader"
    19.       }) : ['style-loader', 'css-loader?sourceMap']
    20.     },
    21.     {
    22.       test: /\.(jpg|png)$/,
    23.       use: ['url-loader?limit=10000&name=img/[name].[ext]']
    24.     },
    25.     {
    26.       test: /\.html$/,
    27.       use: ['html-loader']
    28.     }]
    29.   },
    30.   plugins: process.env.NODE_ENV === 'production' ? [
    31.     new HtmlWebpackPlugin({
    32.       template: './src/index.html',
    33.       filename: 'index.html'
    34.     }), 
    35.     new webpack.DefinePlugin({
    36.       'NODE_ENV': JSON.stringify(process.env.NODE_ENV) // 直接传字符串的话webpack会把它当作代码片段来编译，这里用JSON.stringify()做字符串化处理
    37.     })
    38.   ] : [
    40.       template: './src/index.html',
    41.       filename: 'index.html'
    42.     }), 
    43.     new webpack.HotModuleReplacementPlugin(), 
    44.     new webpack.NamedModulesPlugin(), 
    45.     new webpack.DefinePlugin({
    46.       'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    47.     })
    48.   ],
    49.   devServer: {
    50.     contentBase: path.resolve(__dirname, 'src'),
    51.     hot: true,
    52.     noInfo: false
    53.   },
    54.   devtool: 'source-map'
    55. };

    copy以下代码到webpack.entry.js

    最后将上一节lesson2中的src开发目录复制到lesson3中，命令行运行npm start，修改html、css等文件时，浏览器自动刷新，一切符合预期，棒！
    退出执行npm run build，打包生成的webpack.bundle.js由原本的700kb到现在的270kb（除去jquery源文件大小的话就只有3kb，下一节晋级篇会讲授怎么把第三方库独立引入），改善非常可观！

    打包完目录结构如下：（.map是sourceMap文件）
    《兼容开发和生产环境的配置文件》 - 图1
    正常生成index.html和style.css，在webpack.bundle.js中也没有重复打包html和css，本地打开index.html时，页面显示正常，棒！

    其实上面这种解决方案是比较复杂的，还有另外一种方式就是把生产环境和开发环境的配置文件分开写并保存到两个文件中，但对于我这种有代码洁癖的人来说，我接受不了。?????