webpack 介绍

Webpack 是前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 CMD 模块、ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack 打包工具安装

一. 工具安装

安装nodejs

1).浏览器访问 nodejs.cn/download。

推荐安装稳定版。

a.windows版本

推荐使用msi安装包，根据系统位数选择对应版本。

b.mac版本

下载pkg安装包。

2). 安装nodejs后，校验是否安装成功。

windows系统，打开cmd命令行（使用 ctrl + r,在弹出的输入框中输入cmd），再cmd 命令行中输入 node -v 回车后能出现nodejs版本号。

苹果系统，打开终端，命令行中输入 node -v 回车后能出现nodejs版本号。

全局安装webpack

1).在cmd命令行中输入npm install -g webpack 回车等待安装。

2).在cmd命令行中输入webpack -v,回车后能出现nodejs版本号。

二. 初次使用webpack

初始化项目

创建项目文件目录

mkdir -p ~/webpack/test
cd ~/webpack/test
npm init

一路回车到底。项目初始化后会多出一些目录和文件。

目录和文件的介绍：

node_moudles ：目录，nodejs插件包。若要使用git 提交代码，版本库请忽略该目录。
package.json：文件，nodejs包管理配置文件，锁定项目中使用的插件版本。
package.lock.json：文件，nodejs包管理配置文件，锁定项目中使用的插件版本。

在项目中再次安装webpack

npm install --save-dev webpack

安装后会在项目的pack.json 文件中加入webpack的版本号。

webpack 简单入门

打包js

创建文件hello.js vi hello.js

hello.js文件内容:

function hello(str){
	alert(str);
}
hello('hello world!');

命令行执行 webpack hello.js -o hello.bundle.js --mode development

回车后，命令行中出现

Hash: cc39a4572ec11208ad40
Version: webpack *.**.*
Time: 57ms
Built at: 20**-**-** **:**:**
          Asset      Size  Chunks             Chunk Names
hello.bundel.js  3.81 KiB    main  [emitted]  main
Entrypoint main = hello.bundel.js
[./hello.js] 65 bytes {main} [built]

参数说明 --mode取值范围：

1. development：开发模式。
2. production：生产模式。

创建文件 index.html vi index.html

index.html文件内容:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="dist/hello.bundle.js"></script>
</head>
<body>
	
</body>
</html>

使用chrome浏览器访问index.html

打开chrome浏览器的开发者工具(windows版本：按F12;mac版本可以使用鼠标右键选择审查)，切换到console。可以看到如下效果图

点击 hello.js，会切换到source。

因为我们使用的是开发模式，展开webpack://选择hello.js

打包css

1.安装插件css-loader style-loader

命令行执行npm install css-loader style-loader --save-dev

2.添加文件 style.css vi style.css

style.css内容：

*{
	padding: 0;
	margin:0;
}
body{
	background-color: blue;
}

3.修改hello.js vi hello.js

再最顶上添加一行 require('./style.css');

修改hello.js内容：

require('./style.css');
function hello(str){
        console.log(str);
}
hello('hello world!');

这里会比较怪，在js文件中引入 css。随着webpack深入学习，后面会单独分开打包css 和js。

执行webck打包命令 webpack hello.js -o hello.bundle.js --mode development 会出现错误。

Hash: 4a5bc3bb7770c0f8709f
Version: webpack *.**.*
Time: 70ms
Built at: 20**-**-** **:**:**
          Asset      Size  Chunks             Chunk Names
hello.bundle.js  4.28 KiB    main  [emitted]  main
Entrypoint main = hello.bundle.js
[./hello.js] 89 bytes {main} [built]
[./style.css] 162 bytes {main} [built] [failed] [1 error]

ERROR in ./style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> *{
| 	padding:0;
| 	margin:0;
 @ ./hello.js 1:0-22

错误原因是：没有正确的使用对应的解析器处理css样式文件。

打包命令需要指明使用哪个解析器处理，修改后的打包命令如下 webpack hello.js -o hello.bundle.js --mode development --module-bind 'css=style-loader!css-loader'

 Hash: 919bb6a22b470efa04ff
Version: webpack *.**.*
Time: 70ms
Built at: 20**-**-** **:**:**
          Asset      Size  Chunks             Chunk Names
hello.bundle.js  23.3 KiB    main  [emitted]  main
Entrypoint main = hello.bundle.js
[./hello.js] 89 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./style.css] 209 bytes {main} [built]
[./style.css] 1.05 KiB {main} [built]
    + 3 hidden modules

命令--module-bind 'css=style-loader!css-loader ，请从右往左看

使用css-loader解析器解析css文件。
使用style-loader读取css文件。
中间的感叹号是串形链接符。

参数说明 --module-bind:告知webpack使用哪种解析器处理。

使用chrome浏览器访问index.html

在审查元素中能看到样式插入到了 head标签中

webpack打包参数扩展

--progress,显示打包进度
--display-moudle，显示打包的模块
--colors，显示文字
--display-reasons，显示依赖

执行打包命令webpack hello.js -o hello.bundle.js --mode development --progress --display-moudle --display-reasons --module-bind 'css=style-loader!css-loader'

更多参数说明可以在命令行中输入webpack -help查看。

更多webpack 介绍，请访问

webpack英文网站 webpack.github.io

webpack中文网站 www.webpackjs.com

总结

npm

查看npm版本号npm -v

webpack安装

全局安装npm install -g webpack
初始化项目npm init
再次在项目中安装webpacknpm install --save-dev webpack
查看webpack版本号 webpack -v

webpack打包命令

1. webpack hello.js -o hello.bundle.js --mode development
2. webpack hello.js -o hello.bundle.js --mode development --progress --display-moudle  --display-reasons --module-bind 'css=style-loader!css-loader'

webpack打包参数

--module-bind 'css=style-loader!css-loader'，css文件交给loader
--mode，取值development、production
--progress,显示打包进度
--display-moudle，显示打包的模块
--colors，命令行显示颜色
--display-reasons，显示依赖

思考后问：每次都要输入那么一长串命令，若项目复杂一些,解析器再多一些岂不是会更长！

不用担心，webpack 打包时可以通过配置文件进行配置，以简化命令行输入。 webpack配置文件学习，请看webpack4.x实战二，配置文件。

webpack4.x实战一，安装与简单入门