Vue.js 学习笔记十一：Webpack之webpack 配置 配置文件分离

目录

webpack 配置

配置文件分离

---

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