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优化的主要内容,如果未能解决你的问题,请参考以下文章

webpack配置之自定义loader

自定义 webpack 配置4:优化配置

自定义Webpack配置

自定义Webpack配置

在 React 故事书自定义 webpack 配置中使用 webpack ProvidePlugin

如何配置 webpack 以将自定义字体加载到故事书中?