二.Webpack的安装和命令行

Webpack的安装和命令行

1.安装

全局安装webpack

npm install webpack -g                

webpack4需要安装cli

npm install -D webpack-cli

查看是否安装，以及安装的版本

webpack -help                        

建立一个文件后

npm init                                 

在局部安装webpack

npm  install  webpack  --save-dev      

（注意执行npm install webpack --save-dev命令时由npm init生成的package.json的name不能叫webpack，否则会报错）

2.命令行

1.编辑打包

1.1基本打包

我们在目录中新建hellow.Js,对齐进行打包，打包后的文件叫hellow.bundle.js

webpack  hellow.js  hellow.bundle.js

结果为：

执行完命令后出现列表，
Hash；
Verison ： webapck的版本号；
Time ： 打包花费的时间
Asset : hellow.bundle.js（打包后的文件）
Size: 2.51KB （文件的大小）
Chunks: 0（打包的分块）
Chunk Names: Main（这次打包的块名称）

Hellow.js:

function say(str){
	console.log(str);
}

生成的hellow.bundle.js的解析：

//打包过程中会生成webpack所需要的一些函数
 (function(modules) { // webpackBootstrap
。。。。。。。。
})
/******/ ([
// 对依赖的模块（就是我们hellow.js中的代码）进行编号	
/* 0 */
/***/ (function(module, exports) {
function say(str){
	console.log(str);
}
/***/ })
/******/ ]);

打包—案例1

1.2 A引用B.js，打包A

World.js:

function add(){
	return {}
}

Hellow.js

require('./world.js');
function say(str){
	console.log(str);
}

执行 webpack hellow.js hellow.bundle.js 命令
结果：

可以看到【0】为hellow.js [1]为world.js
生成hellow.bundle.js

//打包过程中引入webpack的依赖
/******/ (function(modules) { // webpackBootstrap
})
/************************************************************************/
/******/ ([
//对依赖的模块进行编号
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
//提示在0模块中引用了1模块
//hellow.js的内容
__webpack_require__(1);
function say(str){
	console.log(str);
}

/***/ }),7	/* 1 */
/***/ (function(module, exports) {
//world.js的内容
function add(){
	return {}
}

/***/ })
/******/ ]);

打包—案例2

1.3常用的命令

能看到打包过程的：

webpack [name.js]  [newName.js]  --progress

看打包的模块（列出所有引用模块）：

webpack [name.js]  [newName.js]  --display-modules

显示打包这个模块的原因：

webpack [name.js]  [newName.js] --display reasons

实时跟新打包(页面变化自动打包)：

webpack [name.js]  [newName.js] --watch

案例地址：https://github.com/haochangdi123/cleanUp-webpack