发布于2021-05-30 12:07 阅读(1041) 评论(0) 点赞(24) 收藏(3)
目录
随着我们业务逻辑的增多,图片、字体、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
作者:麻辣小龙虾
链接:http://www.qianduanheidong.com/blog/article/116028/a6ac177365fa45b83c52/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!