webpack文件配置

1.mode

2.devtool

3.entry

4.output

webpack提供的 CLI 支持很多的参数，例如 --mode，但更多时候我们会使用配置文件来控制webpack的行为。默认情况下，webpack会读取webpack.config.js 文件作为配置文件，但也可以通过 CLI 参数 --config 来指定某个配置文件。配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置，例子如下：

module.exports = {//在这里添加配置对象
}

【注】

1）配置文件中的代码，必须是有效的node代码

2）当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准

1.mode

编译模式，字符串，取值为development或production，指定编译结果代码运行的环境，会影响webpack对编译结果代码格式的处理

2.devtool

控制是否生成且如何生成source map(源码地图)，具体配置请点击这里

【扩展】源码地图

A）概念：前端发展到现阶段，很多时候不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码。这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误。为了解决这一问题，chrome浏览器率先支持了source map，其他浏览器纷纷效仿，目前，几乎所有的新版浏览器都支持了source map。source map实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系。

B）最佳实践：source map应在开发环境中使用，作为一种调试手段，不应该在生产环境中使用。source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题

3.entry

该配置指定文件入口，配置的属性名为chunk名称，其值为指定文件的路径(入口模块)。一个entry对象中可以包含多个chunk，一个chunk也可以包含多个入口模块，代码如下

module.exports = {mode: "production",entry: {main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块）a: ["./src/a.js", "./src/index.js"] //启动模块有两个},devtool: "source-map"
}

4.output

指定编译结果文件，这个配置中包含很多属性，最重要的是 path 和 filename，path 的属性值为打包后文件的路径，一般使用node的内置模块 path 的 path.resolve() 方法来搞定路径问题，如果不清楚，请戳这里。filename决定了我们打包好的文件名称，由于打包过程中，可能生成多个文件，因此这里的命名不能简单的直接指定命名，而是可以采用计算出文件名的方法，有以下几个规则

name：chunkname
hash：总的资源hash，因为当改变文件内容时，hash值会跟着变化，所以通常用于解决缓存问题，防止因文件内容改变而文件名没有发生变化时，浏览器不重新请求资源的情况。
chunkhash：使用chunkhash
id：使用chunkid，因为其在生产环境为以0开头的数字，而在开发环境为入口文件的文件名，所以不推荐

举个例子来看看怎么配置该属性叭

var path = require("path")
module.exports = {mode: "development",entry: {main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块）a: ["./src/a.js", "./src/index.js"] //启动模块有两个},output: {path: path.resolve(__dirname, "target"), //必须配置一个绝对路径，表示资源放置的文件夹，默认是distfilename: "[name].[chunkhash:5].js" //配置的合并的js文件的规则，chunkhash：5表示只取chunkhash的前5位},devtool: "source-map"
}

【结果】生成的文件如下图，其中后缀位map的文件是源码地图

还有两个重要的配置，loader和plugin，单独来说