webpack的系统学习 -- 配置文件 webpack.config.js

之前在项目中其实，一直用的是vue-cli，并没有关注过webpack的打包工具，vue脚手架其实已经内置webpack了，为什么市场上还这么多要求会webpack呢，那么肯定是有优点可取的；

下面系统学习下webpack，一边学习一边记录；

1. 创建配置文件 webpack.config.js

配置文件的名字叫 webpack.config.js 位于项目根目录下

它的内容如下：

1. module.exports = {
2. entry: './src/app.js',
3. output: {
4. filename: './dist/app.bundle.js'
5. }
6. };

简单解释一下： entry 表示源文件，output 这边表示的是输出的目标文件。

那怎么用呢？

直接在终端上输入 webpack 就可以了。webpack 命令会去找 webpack.config.js 文件，并读取它的内容（源文件和目标文件），最后进行相应的处理。

如下所示：

 

 当然，webpack.config.js 的内容不止这么简单，可以更复杂些。

2. 改造 package.json 的 scripts 部分

 package.json 这个文件，它主要放了一些项目的介绍信息，除此之外，它还要一个重要的功能。

就是可以放一些常用的命令行脚本，比如我们可以把我们经常要用的 webpack 命令放到这里来。

我把它改了一下，变成类似下面这样：

1. {
2. "name": "hello-wepback",
3. "version": "1.0.0",
4. "description": "",
5. "main": "index.js",
6. "scripts": {
7. "dev": "webpack -d --watch",
8. "prod": "webpack -p"
9. },
10. "author": "",
11. "license": "ISC",
12. "devDependencies": {
13. "webpack": "^3.8.1"
14. }
15. }

改动的内容主要是增加了下面几行：

1. "scripts": {
2. "dev": "webpack -d --watch",
3. "prod": "webpack -p"
4. },

怎么用呢？

很简单，分别是

1. $ npm run dev

和

1. $ npm run prod

你会发现 npm run dev 和 webpack -d --watch 的效果是一样的。

为什么要用 package.json 的 scripts 功能呢？

我觉得主要有两个原因吧：

第一：简单维护，所有的命令都放一起了，也能方便地查看

第二：别人下载了你的源码，一查看 package.json 就能知道怎么运行这个项目