webpack配置開發環境和生產環境


前言

開發環境(development)和生產環境(production)的構建目標差異很大

在開發環境中,我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。

在生產環境中,我們的目標則轉向於關注更小的 bundle,更輕量的 source map,以及更優化的資源,以改善加載時間。

由於要遵循邏輯分離,我們通常建議為每個環境編寫彼此獨立的 webpack 配置。生成環境和開發環境有差異,但我們需要遵循不重復原則,保留一個“通用”配置。為了將這些配置合並在一起,我們將使用一個名為 webpack-merge 的工具。通過“通用”配置,我們不必在環境特定的配置中重復代碼

配置環境

1. 先安裝一個工具和兩個插件

npm install --save-dev webpack-merge //配置時避免重復代碼
npm install --save-dev uglifyjs-webpack-plugin //縮小js文件
npm install --save-dev clean-webpack-plugin //自動刪除webpack里的dist目錄

安裝完成后在package.json可以看到

image.png

2. 刪除webpack.config.js文件,再新建以下三個配置文件

image.png

webpack.common.js 通用配置

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');//注意引入寫法
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main:'./src/main.js'
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({title:'output management'})
    ],
    output:{
        filename:'[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
 };

webpack.dev.js 開發環境

const {merge} = require('webpack-merge'); //1.加載工具
const common = require('./webpack.common.js'); //2.獲取通用配置
module.exports = merge(common, { //3.合並配置
    devtool: 'inline-source-map',//報錯提醒
    devServer: { //自動編譯
        contentBase: './dist'
    }
})

webpack.prod.js 生成環境

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(common, {
    devtool:'source-map',//使用source-map
    plugins:[
        new UglifyJSPlugin({sourceMap:true})//打開source-map
    ],
})

建議在生產環境中啟用 source map,因為它們對調試源碼(debug)和運行基准測試(benchmark tests)很有幫助。打包后會生成一個map文件

修改npm腳本

現在,我們把 scripts 重新指向到新配置。將 npm start 定義為開發環境腳本,並在其中使用 webpack-dev-server;將 npm run build 定義為生產環境腳本:

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.prod.js",//修改
  "start": "webpack-dev-server --open --config webpack.dev.js"//修改
},

指定環境

通常我們需要為生產環境和本地環境添加不同的環境變量,在Webpack中可以使用DefinePlugin進行設置。

許多框架與庫都采用process.env.NODE_ENV作為一個區別開發環境和生產環境的變量。process.env是Node.js用於存放當前進程環境變量的對象;而NODE_ENV則可以讓開發者指定當前的運行時環境,當它的值為production時即代表當前為生產環境,庫和框架在打包時如果發現了它就可以去掉一些開發環境的代碼,如警告信息和日志等。這將有助於提升代碼運行速度和減小資源體積

webpack.prod.js

const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');//1. 加載

module.exports = merge(common, {
    devtool:'source-map',
    plugins:[
        new UglifyJSPlugin({sourceMap:true}),
        new webpack.DefinePlugin({//2.使用
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ],
})

源代碼可在分支env獲取


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM