webpack开发模式和生产模式设置及不同环境脚本执行

1. webpack设置开发模式和生产模式

(1). DefinePlugin插件设置

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: '"production"'
    },
    __DEV__: false
})

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production')
    },
    __DEV__: false
})

new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
    __DEV__: false
})

(2). 命令行设置

"scripts": {
     "watch": "cross-env NODE_ENV=production  ....."
}

2. 开发模式和生产模式脚本区分执行

if(process.env.NODE_ENV == 'development'){
    console.log('development');
}
else{
    console.log('production');
}

if(__DEV__){
    console.log('development');
}
else{
    console.log('production');
}

以上代码不必担心在浏览器中会不兼容，webpack会将其编译为一个bool值：

if(true){
    console.log('development');
}
else{
    console.log('production');
}

if(false){
    console.log('development');
}
else{
    console.log('production');
}

如果使用了UglifyJsPlugin，则会编译为：

console.log('development');
console.log('production');

完全不会增加多余的代码，不会增大线上文件体积，所以可以放心使用。

3. html页面注入环境变量

在htmlWebpackPlugin中添加环境变量env的配置

new HtmlWebpackPlugin({
    template: './src/public/index.ejs',
    inject: 'body',
    hash: true,
    env: process.env.NODE_ENV
})

在html页面中可以这样使用

<% if(htmlWebpackPlugin.options.env == 'production'){ %>
<script src="xxx/react.min.js"></script> 
<script src="xxx/react-dom.min.js"></script> 
<% } else { %>
<script src="xxx/react.development.js"></script>
<script src="xxx/react-dom.development.js"></script>
<% } %>

通常情况下，开发模式hash为false，生成模式hash为true，也可以用hash这个变量来区分环境

<% if(htmlWebpackPlugin.options.hash){ %>
<script src="xxx/react.min.js"></script> 
<script src="xxx/react-dom.min.js"></script> 
<% } else { %>
<script src="xxx/react.development.js"></script>
<script src="xxx/react-dom.development.js"></script>
<% } %>