这样就得到了一个安装上了webpack及其脚手架的项目

上一章创建的项目中，我们新建几个文件

1
2
3
4
5
6
7
8
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
+   |- src
+       |- let.js
+       |- get.js
+       |- index.js

其中代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
//let.js中↓↓↓↓↓↓
let name = '小明';
module.exports = name;

//get.js中↓↓↓↓↓↓
module.exports = function(name){
    console.log(name)
};

//index.js中
let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)

然后，我们执行打包命令

1
npx webpack

然后我们看到了，文档目录变成了

1
2
3
4
5
6
7
8
9
10
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- src
        |- let.js
        |- get.js
        |- index.js
+   |- dist
+       |- main.js

多出来了一个dist目录，和main.js文件，这个文件，就是被webpack所打包出来的文件，整合了let.js、get.js、index.js的所有js代码。

我们再修改一下目录

1
2
3
4
5
6
7
8
9
10
11
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- main.js
+       |- index.html

新建一个index.html文件，并引入刚打包好的js文件

1
2
3
4
5
6
7
8
9
10
11
//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./main.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

将这个文件运行到浏览器中，查看控制台，就可以看到打印了“大家好,我的名字是小明”。

这个地方使用了webpack的npx webpack打包指令

可以这样说，执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件

由表现，我们可以看出，配置项中

1
2
默认入口是/src/index.js
默认出口为/dist/main.js

我们也可以通过package.json来增加命令，来达到更好理解的编译指令，相当于给npm run 建了一个快捷方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//package.json
    {
      "dependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {},
      "scripts": {
+       "build":"webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "description": ""
    }

这样，我们就可以使用快捷方式来打包啦

1
npm run build

另外，对webpack传入指令 –mode可以指定开发模式 development为开发模式 production为生产模式，后面会提到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//package.json
    {
      "dependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {},
      "scripts": {
        "build":"webpack",
+       "dev":"webpack --mode development",
+       "product":"webpack --mode production",
+        "showColorAndProgress":"webpack --progress --colors",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "description": ""
    }

这样，可以使用

1
2
3
npm run product#运行生产模式
npm run dev#运行开发模式
npm run showColorAndProgress#运行开输出带进度及颜色的编译

备注：

  • 开发环境会包含devDependencies及dependencies中的依赖包
  • 生产环境只会包含dependencies中的依赖包

小技巧：

可以通过webpack-cli的一些参数，来让webpack的编译更有趣一些

  • –progress 显示合并代码进度
  • -p 对打包后的文件进行压缩
  • -d 提供SourceMaps，方便调试，方便排查打包速度瓶颈。
  • –profile 输出性能数据，可以看到每一步的耗时
  • -display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
  • –display-error-details 方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
  • –config：指定一个 Webpack 配置文件的路径；
  • –mode：指定打包环境的 mode，取值为development和production，分别对应着开发环境和生产环境；
  • –json：输mode出 Webpack 打包的结果，可以使用webpack –json > stats.json方式将打包结果输出到指定的文件；
  • –watch, -w：watch 模式打包，监控文件变化之后重新开始打包；
  • –color, –colors/–no-color, –no-colors：控制台输出的内容是否开启颜色；
  • –hot：开启 Hot Module Replacement模式，后面会详细介绍；