webpack自定义配置的方法及webpack-merge优化
Posted 前端扎啤
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack自定义配置的方法及webpack-merge优化相关的知识,希望对你有一定的参考价值。
前言:vue-cli为我们配置了一些常规的指令和属性,但是现实开发中往往需要更多的配置才能满足某些需求。比如生产环境与开发环境的区分等等…本节记录一下在vue中webpack 的相关知识。
package.json
先看一下package中默认的脚本指令:
- serve
- build
- lint
分别指代了vue-cli-service的对应指令
这里是引用
但是以上只是默认配置的常规项,远远不足以满足现实的开发需求。往往需要探究以下几种方法:
webpack中development和production两种模式的打包
这里主要是对npm run serve 和 npm run build 之间做出区分
serve往往是本地运行的开发模式(development)
build往往是需要打包部署到正式或者测试环境上的(production)
一个简单的需求:开发环境我们希望方便调试,而上线正式我们希望代码被压缩。
这里用到webpack的一个属性devtool:
devtool: "source-map", // enum
devtool: "inline-source-map", // 嵌入到源文件中
devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
devtool: "hidden-source-map", // SourceMap 不在源文件中引用
devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
devtool: "eval", // 没有模块映射,而是命名模块。以牺牲细节达到最快。
// 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
// 牺牲了构建速度的 `source-map' 是最详细的。
这就需要有不同的webpack的配置文件:
解决思路1:不断更改webpack.config.js的内容
mode: 'development',
devtool: source-map',
mode: 'production',
devtool: 'cheap-module-source-map',
解决思路2:区分webpack配置文件
例如:webpack.dev.js
webpack.prod.js
两种 :开发用前者,上线用后者
所以默认的package.json也需要对应指定配置文件
"scripts": {
"serve": "vue-cli-service serve --config webpack.dev.js",
"build": "vue-cli-service build --config webpack.prod.js",
"lint": "vue-cli-service lint",
},
对思路2的进一步优化 引入webpack-merge
区分了配置文件其实还有一个可以优化的地方,那就是把dev和prod的配置文件中相同的部分进行提取:
建立一个公共的配置文件webpack.base.js
webpack-merge可以帮助我们引入公共配置进入dev和prod
npm install webpack-merge -D//安装
附主要核心代码:
以dev.config.js举例利用merge合并:
const webpack = require('webpack')
const baseWebpackConfig = require('./webpack.base.conf')//共有的配置
const merge = require('webpack-merge')
//merge 合并
const devWebpackConfig = merge(baseWebpackConfig, {})
以上是关于webpack自定义配置的方法及webpack-merge优化的主要内容,如果未能解决你的问题,请参考以下文章