目录
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
就是生产环境打包。