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>
<% } %>