webpack開發模式和生產模式設定及不同環境指令碼執行

看風景就發表於2018-10-19
Web模式指令碼

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

相關文章