文章目錄
- 1.為什么要分離組態檔
- 2.實施
- 3.總結
1.為什么要分離組態檔
在我們開發程序中，經常在webpack.config.js檔案中配置很多東西，不管是開發環境下，還是生產環境下，但是當我們在生產環境下打包時，其實很多我們開發環境下的配置時用不到的，那么當我們把所有的配置寫在一個檔案中時，那是不太穩妥的，
因此我們需要抽離組態檔，
2.實施
我們需要安裝webpack-merge插件
npm install webpack-merge --save-dev
接著分離檔案，將組態檔分為三個檔案，分別時base.config、pron.config、dev.config
其作用為
base.config：公共配置抽離部分
pron.config：生產環境相關配置
dev.config： 開發環境相關配置
接著我們可以使用merge進行組態檔的合并：
dev.config.js檔案代碼
const webpackmerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackmerge(baseConfig, {
devServer: {
contentBase: path.resolve(__dirname, 'build'),
inline: true,
open: true
}
})
prod.config.js檔案代碼
const webpackmerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports=webpackmerge(baseConfig,{
mode: 'development'
})
base.config.js檔案代碼：
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, '../build')
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin('著作權所有所有:小牲口online'),
new HtmlWebpackplugin({
template:'./index.html'
})
],
}
最后我們還需要在package.json中配置打包時如何執行組態檔，因為webpack默認是只識別webpack.config.js組態檔的，
"build": "webpack --config ./config/prod.config.js",
"dev":"npx webpack serve --config ./config/dev.config.js"
因為我這里使用的是webpack5以上的版本，因此dev-server的啟動方式和webpack5以下的有所不同，詳細可見官網
https://webpack.js.org/configuration/dev-server/#root
這時我們的組態檔就算是配置成功了，
3.總結
雖然我們使用了三個檔案來進行配置，而webpack.config.js只用了一個檔案來進行配置，仿佛更加麻煩了，實際上在開發中，我們需要配置大量的內容，生產和開發分離是可取的，也是一種優化的寫法，如果你閱讀過vue-cli腳手架構建的專案會發現其中webpack構建部分使用的就是此方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272899.html
標籤：其他