3.WebPack配置文件

一、为什么需要WebPack配置文件

引用自官方：

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：

我们在项目目录下新建一个webpack.config.js

const path = require("path"); //导入一个模块

module.exports = {

entry:"./src/index.js", //入口文件

output:{//输出文件对象

filename:"bundle.js",//输出文件名

path:path.resolve(__dirname, 'test')//输出文件的路径，在这种方式下是个绝对路径

}

};

注意：这里的require()函数是用来动态导入一个模块的，这里用到了node.js自带的一个path模块（类似于c++中的include<…>，只不过是动态导入的，和LoadLibarary()相似），其中__dirname代表当前目录，reslove()函数获得一个绝对路径也就是当前目录下的……\test。并且注意这不是JSON文件格式，所以上面的配置文件是可以打注释的。

我们运行以下命令：

webpack –-config webpack.config.js

将会产生一个bundle.js文件，也就是打包好的文件。

这和之前在dist文件夹生成好的JS文件是一样的。

默认的，webpack会有一个默认的配置设置，比如之前我们没有指定输出文件夹，它确自动的创建了一个dist文件夹并把打包好的文件放在其下。了解一些默认的配置对理解WebPack以及解决莫名奇妙的问题是非常有帮助的。

二、NPM脚本

要知道，程序员都是懒的，能减少重复的劳动绝对不会自己亲自动手，我们发现，每一次打包都要输入webpack，然后后面跟着一串选项，比如 webpack –-mode production –XXX XXX…….，在之前你可能没有体会到，因为你没有用到这些选项，现在假想，你要用到许多选项，每次都输入这么多，会不会觉得很麻烦？所以，NPM脚本就产生了。

我们在package.json文件中的字段scripts字段添加如下信息：

{

"name": "webpack-demo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build":"webpack --mode production"

},

"keywords": [],

"author": "",

"license": "ISC"

}

然后在命令行工具下执行：

npm run build

这里的npm run XXX是运行XXX脚本，XXX是你在package.json文件中scripts字段下定义的。