webpack自定义配置的方法及webpack-merge优化_webpack mergeconfig

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】