前言

阅读此文之前，墙裂建议先把webpack初相识作为前置过一遍。相信看完webpack初相识这篇之后，你已经对webpack有了一个整体的认知，为什么没有直接去说这个配置怎么用，那个配置怎么写，因为我觉得你应该要先有一个整体认知之后，再去展开其中的细节。

webpack配置

我们今天围绕着webpack的配置展开，就像打地基一样，前置知识一定要铺垫好了之后，再去锦上添花。在上一篇文章中提到了package.json里去配置脚本，我们只是为了方便演示效果进行了简单的配置，webpack贴心的为我们准备了专门用于写配置的文件（webpack.config.js），今天让我们围绕着以下4点大纲进行展开吧。我知道你肯定会问，为什么不说loader、plugin这些，就像吃饭一样，不要一口吃太多，后面文章我肯定会为各位进行阐述，学习一定要有足够的耐心，要静下心来，就像是一场修行，要对知识有足够的敬畏，我相信他也会在合适的时机给予你正向的反馈。

mode
entry
output
devtool

webpack.config.js

我们先来看下官网的配置demo吧：

第一行引入的path是node相关的知识，如果有兴趣的同学可以自行了解，好重点来了，module.exports,为什么是用commonjs规范来导出一个对象，为什么不用es6的导出方式？是因为webpack是运行在node环境下的，他会读取webpack.confg.js这个文件，所以在这个配置文件里你书写的代码要在node环境下可以正常运行。你一定要清楚，你不是要记住配置文件要这么写，而是要知道为什么？只有你知道了为什么，知识在你脑海里的印象才会更加的深刻，而不是靠死记硬背。

mode

在说mode之前，我们先看一下初相识中package.json中写的脚本吧:

大家一定不陌生吧，当我们在终端去敲npm run dev的时候，就是在这里指定了mode模式为开发模式，我们先删掉这里的mode，然后新建一个webpack.config.js，去配置文件里配置一下吧，此时package.json为：

项目结构此时为：

配置文件webpack.config.js为:

module.exports = {
    mode: 'development'
}

ok，我们在终端运行 npm run dev，可以看到我们依然成功打包完成了我们的项目，各位小伙伴注意一点，如果你同时在package.json里也进行对应的配置，会覆盖掉webpack.config.js文件中的配置。

entry

现在，我们先做一件事情，把src下的index.js修改为main.js,重新运行npm run dev，好，你会发现报错了,是因为webpack会默认读取src下的index.js作为入口文件，现在让通过entry来修改一下入口文件吧:

module.exports = {
    mode: 'development',
    entry: './src/main.js'
}

重新运行npm run dev，你成功了你知道吗？当然了，webpack入口不仅支持单入口文件，还支持多入口文件，具体的配置肯定是等待着乐于探索的你去翻阅文档啦！

output

相对于入口，聪明的你肯定猜到了这是我们的输出，让我们修改一下配置吧:

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
    }
}

重新运行npm run dev，看到dist目录下的默认的main.js被我们重命名成了bundle.js。

devtool

我们要清楚这个配置是干嘛的，官方解释：This option controls if and how source maps are generated.这个配置是为了控制是否以及如何生成源映射的。不要被这些官方黑化给整懵了，通俗易懂的来说就是控制打包生成的代码，是否方便你调试的。
为了具体说明我们先写一个bug，来到a.js:

import b from './b.js'
console.log('a')

const obj = null
obj.sayHi()   // 此处是bug

export default 'a'

我们重新打包来到控制台：

报错了，定位到源代码：

啊，这不是我写的源代码，好，翻阅文档加入配置:

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
    },
    devtool: 'eval-source-map'
}

再次重新打包定位到报错的源代码处:

妙啊~，你又成功了你知道吗！我不是在告诉各位该如何写bug，而是你在遇到了bug的时候该去怎样正确的调试，谁都会写bug，你要找到属于合适自己的方式来解决bug是最关键的，如果你也喜欢这种渐进式的讲解方式，希望可以给我一个免费的一键三连！

尾声

好啦，文章到这里暂时告一段落了，最后简单聊一聊学习方法，雷布斯提到了他在大学学习专业数学时，遇到不会的先跳过，先去通篇把整个学习完再回过头来看，看不懂再看，如此反复，终会明白，就是所谓的跳读。我们应该都知道书读百遍其义自见，对于一个陌生的东西刚刚接触你可能不会，但是随着你不断地去运用，慢慢的你就会提升你的认知，当然了如果你遇到问题，恰好也有合适的途径请教权威的人是更好的，因为这可以节约你的时间。你想不想把一个技术用好，取决于你想要花在上面的心思有多少，举一个很简单的栗子，拿lol来说，当年insec一脚回旋踢引发全场欢呼时，我的内心OS是这样的：多帅噢。所以花费很多时间去练习各种操作，以至于后来我也可以轻松地R闪。所以老手和新手之间的区别就在于你是否愿意！

webpack再相遇

前言