这样就得到了一个安装上了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模式,后面会详细介绍;