webpack區分developement和production打包
一、developement和production打包區別
開發環境使用的模式是development模式
- 需要devServer可以幫助我們開啟一個伺服器,裡面還集成了一些HMR,(HMR的作用:只要更改了程式碼就會重新打包,內容會實時展現在頁面),方面開發。
- 需要非常全面的SourceMap資訊,方便除錯。
- 不需要進行壓縮
線上環境使用的是production模式 - 不需要開啟伺服器
- 不需要非常全面的sourceMap資訊,可以生成一個.map檔案進行儲存。
- 需要對程式碼進行壓縮
那麼如何解決在開發和打包的切換中常常修改webpack.config.js檔案內容的問題?本文提供2種方式。
二、2種方式實現分模式打包
首先,我們先在根目錄下新建3個配置檔案:
webpack-dev.js:做developement模式下獨有的配置。
webpack-prod.js:做production模式下獨有的配置。
webpack-common.js:做2種模式共有的配置。
方式一:直接用不同配置檔案打包。 developement模式用webpack-dev.js配置檔案打包,production模式用webpack-prod.js配置檔案打包。
方式二:用不同的環境變數打包。2種模式都用webpack-common.js配置檔案打包,不同模式打包時,傳不同的環境變數。
不論哪種方式,我們都需要把根據環境分開的webpack-dev.js、webpack-prod.js和webpack-common.js裡的配置合併使用,所以我們就需要用到webapck-merge外掛,我們在控制檯執行:
npm install webpack-merge -D
方式一:
1.webpack-common.js做2種模式共有的配置
webpack-common.js做2種模式共有的配置,匯出。
webpack-common.js:
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { main: './src/index.js' }, module: { rules: [ { test: /\.jpg$/, use: { loader: 'file-loader', options: { name: "[name].[ext]", outputPath: './img', limit: 2048 } } }, { test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, modules: true } }, 'sass-loader', 'postcss-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new CleanWebpackPlugin() ], output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') } }
2.webpack-dev.js:做developement模式下獨有的配置
webpack-dev.js做developement模式下獨有的配置,合併webpack-common.js之後匯出。
webpack-dev.js:
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const devConfig = {
//配置mode為development
mode: 'development',
//全面的sourceMap
devtool: 'cheap-module-eval-source-map',
//開啟devServer
devServer: {
contentBase: './dist/',
open: true,
hot: true,
proxy: {
'/api': 'http://localhost:3000'
},
},
optimization: {
//development模式下做tree shaking時,需要做如下配置,production模式不需要。
usedExports: true
},
plugins: [
//開啟熱更新
new webpack.HotModuleReplacementPlugin()
],
}
module.exports = merge(commonConfig, devConfig)
3.webpack-prod.js:做production模式下獨有的配置。
webpack-prod.js做production模式下獨有的配置,合併webpack-common.js之後匯出。
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack-common.js')
const prodConfig = {
//配置mode為production
mode: 'production',
//簡潔的sourceMap
devtool: 'cheap-module-source-map',
}
module.exports = merge(commonConfig, prodConfig)
4.pakeage.json 直接用不同配置檔案打包
developement模式用webpack-dev.js配置檔案打包,production模式用webpack-prod.js配置檔案打包。
"scripts": {
"dev": "webpack-dev-server --config webpack-dev.js",
"build": "webpack --config webpack-prod.js"
},
方式二:
1.webpack-dev.js:做developement模式下獨有的配置
webpack-dev.js做developement模式下獨有的配置,匯出。
const webpack = require('webpack')
const commonConfig = require('./webpack-common.js')
const devConfig = {
...
}
module.exports = devConfig
2.webpack-prod.js:做production模式下獨有的配置。
webpack-prod.js做production模式下獨有的配置,匯出。
const commonConfig = require('./webpack-common.js')
const prodConfig = {
...
}
module.exports = prodConfig
3.webpack-common.js做2種模式共有的配置。
.webpack-common.js做2種模式共有的配置,並根據不同的環境變數,合併webpack-dev.js或者webpack-prod.js後匯出。
...
const { merge } = require('webpack-merge')
const devConfig = require('./webpack-dev.js')
const prodConfig = require('./webpack-prod.js')
const commonConfig = {
...
}
//關鍵程式碼
module.exports = function (env) {
if (env && env.production) {
return merge(commonConfig, prodConfig)
} else {
return merge(commonConfig, devConfig)
}
}
4.pakeage.json 用不同的環境變數打包
2種模式都用webpack-common.js配置檔案打包。production環境時傳了環境變數--env.production,告訴webpack-common.js應該合併webpack-prod.js。
"scripts": {
"dev": "webpack-dev-server --config webpack-common.js",
"build": "webpack --env.production --config webpack-common.js",
},