简单粗暴搞定webpack4的配置文件webpack.config.js

转自微信公众号：前端js动力节点。

这节课我们讲配置文件。

有了配置文件，我们可以直接执行webpack命令即可，不能再啰里啰嗦的指定源文件和目标文件了，不过webpack4x里也不用指定源文件和目标文件，不过我们还是可以试一试。

我们在上节课的基础上继续。

---

首先，我们需要在根目录下建立一个名为webpack.config.js的文件。注意哦，这个名字你别乱起，建好后如下图所示：

然后我们打开webpack.config.js,开始编写： 

// 输出模块
// __dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录。
module.exports = {
    entry: __dirname + "/src/index.js", // 唯一入口文件

    output: {
        path: __dirname + "/dist", // 打包后的文件存放的路径
        filename: "bundle.js" // 打包后输出文件的文件名
    }
};

说明：

1.module.exports：不必多说了，就是输出模块的意思。

2.entry：这个就是英文的entrance，入口的意思。我们在这个配置项指定入口文件。

3.output：输出。这里需要指定一下输出的路径path和输出的文件名filename

好的，下面我们就打开控制台，执行一下：

出警告了，因为没有设置模式，不过好像没什么问题，但是还是输入webpack --mode development吧

 看，没报错了，说明配置文件生效了。在浏览器打开index.html依然可以看到Hello World!!

---

那么，输入webpack命令，到底发生了什么事呢？

很简单，在webpack的某个内部脚本中，它会默认去寻找根目录下名字叫webpack.config.js的配置文件，然后将你的模块require进来，将配置选项读出来，最后执行编译。

下面，我们再来介绍两个常用命令。

webpack -p

打包时，对文件进行压缩混淆。

webpack -d

生成sourcemap。

---

咦，这些gulp不是也能做吗？

确实是酱紫滴。

但是，gulp的话就需要单独安装插件来实现，而webpack做这些事情，只需运行命令时加个选项即可。这就是我前面提到过的——webpack只是在打包模块化输出时，顺便做点优化的事情，并不是它的主营业务。

ok，说这么多，不如动手试一下！我们敲入命令：

webpack -p -d

运行结束后，看一下dist目录下的bundle.js，发现已经压缩过了。是否已经加入了sourcemap信息呢？ 

---

sourcemap这块，我们仍旧需要再提一下。

用-d命令打包后，我们发现dist目录下并没有多一个.map文件。

那么，到底map文件生成成功了没有？

我们沿用之前的方法做一下测试。

我在index.js文件里，随便写错点东西，然后重新打包。

打包完成后，我们双击运行index.html,发现已经报错了

从控制台可以看出，sourcemap其实已经生成了，但生成的位置和名字好像有点蹊跷。不过无所谓了，我们可以定位到错误行就ok~~