目录
webpack 配置
配置文件分离
随着我们业务逻辑的增多，图片、字体、css、ES6 以及 CSS 预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者，书写特定文件的位置会出现错误。由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。
使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。
配置文件的管理有一下几种方法。
-
在每个环境的多个文件中维护配置，并通过
--config参数将 webpack 指向每个文件，通过模块导入共享配置。 -
将配置文件推送到库，然后引用库。
-
将配置文件推送到工具。
-
维护单个配置文件的所有配置并在那里进行分支并依赖
--env参数。
这里学习配置文件分离的方法。
我们在根目录下创建 config 文件夹，并创建三个配置文件，分别是：
-
common.config.js公共环境的配置文件 -
dev.config.js开发环境下的配置文件 -
prod.config.js生产环境下的配置文件
src/config/common.config.js
-
const path =
require(
'path')
-
const {VueLoaderPlugin} =
require(
'vue-loader')
-
const webpack =
require(
'webpack')
-
const HtmlWebpackPlugin =
require(
'html-webpack-plugin')
-
-
module.exports = {
-
entry: {
-
index :
'./src/index.js'
-
},
-
output: {
-
path: path.resolve(__dirname,
'./dist'),
-
filename:
'[name].js',
-
},
-
module: {
-
rules: [
-
{
-
test:
/\.css$/,
-
use: [
'style-loader',
'css-loader'],
-
},
-
{
-
test:
/\.vue$/,
-
use :
'vue-loader'
-
}
-
]
-
},
-
resolve: {
-
alias: {
-
'vue$':
'vue/dist/vue.esm.js'
-
}
-
},
-
plugins:[
-
new VueLoaderPlugin(),
-
new webpack.BannerPlugin(
'最终版权归 stary 所有'),
-
new HtmlWebpackPlugin({
-
template:
'index.html'
-
})
-
]
-
}
src/config/dev.config.js
-
module.exports = {
-
mode :
'development',
-
devServer: {
-
contentBase:
'./dist',
-
inline:
true
-
}
-
}
src/config/prod.config.js
-
const UglifyJsPlugin =
require(
'uglifyjs-webpack-plugin')
-
-
module.exports = {
-
mode:
'production',
-
plugins:[
-
new UglifyJsPlugin()
-
]
-
}
所以，在开发时配置文件就是 common.config.js + dev.config.js。生产时配置文件就是common.config.js+ prod.config.js。
为了让两个文件合并在一起，必须装一个东西。
安装 webpack-merge ：
npm install webpack-merge --save-dev修改 webpack.config.js 配置文件：
-
const commonConfig =
require(
"./config/common.config")
-
const devConfig =
require(
"./config/dev.config");
-
const prodConfig =
require(
"./config/prod.config")
-
const { merge } =
require(
"webpack-merge")
-
-
module.exports =
env => {
-
if(env.dev) {
-
return merge(commonConfig, devConfig)
-
}
else
if(env.prod) {
-
return merge(commonConfig, prodConfig)
-
}
else {
-
throw
new
Error(
'No matching configuration was found!')
-
}
-
-
}
修改配置 package.json执行脚本：
-
"scripts": {
-
"test":
"echo \"Error: no test specified\" && exit 1",
-
"build":
"webpack --env prod",
-
"dev":
"webpack serve --open --env dev"
-
}
执行 npm run dev 就是开发环境运行， 执行 npm run build 就是生产环境打包。
转载：https://blog.csdn.net/qq_27875933/article/details/117289353