Webpack2 入门踩坑教程（四）

注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204
本人通过此链接博客学习，并在此基础上增加自己的想法。

上节Webpack2 入门踩坑教程（三）：http://blog.csdn.net/echo601/article/details/76178952

四：生产环境和开发环境

在入口处区分生产环境和开发环境。
1：修改package.json的script项，通过set NODE_ENV来设置环境变量

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf dist && set NODE_ENV=production&&webpack",
    "dev": "set NODE_ENV=development&& node dev-server.js"
},

2：修改webpack.config.js，在入口处添加NODE_ENV环境判断使用生产环境还是开发环境的入口文件及插件。process.env.NODE_ENV可以获取到启动文件的环境变量，nodejs的app.get(‘env’)也可以取得。

var path = require('path'); // 导入路径包 
var webpack = require('webpack');

var DEVELOPENT = process.env.NODE_ENV == 'development';
var PRODUCTION = process.env.NODE_ENV == 'production';

var entry = PRODUCTION ? ['./src/index.js'] : ['./src/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080'];

//开启全局代码热替换，如果是CLI方式这里不用写
var plugins = PRODUCTION ? [] : [new webpack.HotModuleReplacementPlugin()];

module.exports = {
    entry: entry,
    plugins: plugins,
    output: {
        path: path.join(__dirname, 'dist'), // 指定打包之后的文件夹 
        publicPath: '/dist/', // 指定资源文件引用的目录 
        filename: 'bundle.js' // 指定打包为一个文件 bundle.js 
    }
}

3：然后分别运行npm run dev 和npm run build查看。

这里有个问题，我在运行的时候使用 npm run dev 可以实现页面无刷新操作更新内容
但是 npm run build 却必须要刷新页面，这个问题该思考下是哪里出了问题