Webpack简介（一）

什么是webpack

     前端资源构建工具，一个静态资源打包器。
     构建工具：一种将less,jquery,等语法编译成浏览器可以识别的css/javascript/html文件的一种工具（有很多种，webpack是其中一种）
     静态资源打包工具：通过入口文件将所有的静态资源集合生成代码块（chunk），再将它们打包（可以理解为编译）成对应的浏览器可以识别的文件。

webpack的五个核心概念

1.Entry：入口

指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.Output：输出

指示webpack打包后的资源bundles输出到哪里去（本地），以及如何命名

3.Loader：翻译非JavasScript/json文件

webpack本身是无法编译css,img文件，只能理解javaScript文件和json文件。loader让webpack能够理解非javaScript文件。每一个loader都需要下载在使用。

4.Plugins：插件

用于执行一些打包、优化、压缩和重新定义环境中的变量等工作。
每一个plugins都需要下载、引用再使用。

5.Mode：模式–指示webpack使用相应的模式的配置

（1）development：将process.env.NODE_ENV的值设置为development。启用NamedChunckPlugin和NamedModulesPlugin插件。----能让代码在本地调试运行的环境。
（2）production：将process.env.NODE_ENV的值设置为production。启用NamedChunckPlugin和NamedModulesPlugin等（其他任有很多，后文中更新）插件。----能让代码优化上线运行的环境。

Webpack初体验–分别验证js/json文件的打包

1.安装webpack：npm install webpack webpack-cli -g(全局安装)
2.创建项目（安装依赖）：
注意：依赖有两种，一种开发依赖。一种生产依赖。webpack是开发依赖。
     （1）终端文件夹内使用命令npm init：生成node_modules/package-lock.json/package.json文件。
注意：除了名称外，其他的用默认配置，直接回车就好。
     （2）终端npm install webpack webpack-cli -g：安装本地开发依赖。
3.创建src文件夹：项目源代码目录。
4.创建bulid文件夹：webpack打包后的输出文件夹
5.创建入口文件—src文件夹之下创建index.js.

6.在index.js文件中写代码。–js文件

7.终端中执行指令：webpack ./src/index.js -o ./bulid --mode=development。含义为webpack会以   ./src/index.js   为入口文件开始打包，打包后输出到   ./bulid     整体打包环境是开发环境。
结果：在bulid文件之下生成了main.js文件。

8.终端运行文件，执行命令：node .\bulid\main.js

9.在bulid文件夹之下新建index.html。引入main.js文件

10.运行index.html文件。可以正常使用。
报错为找不到图片，与Webpack无关

11.创建/src/data.json文件并打包验证。–json文件


12.创建/src/index.css文件并打包验证。–css文件–报错


结论：
1.webpack能处理js/json资源，不能处理css/img资源
2.生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
3.盛传环境比开发环境多一个压缩js代码

打包样式（css、less）资源

1.创建文件并书写代码


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

3.创建bulid文件夹

3.配置webpack五大核心内容—最最基本配置
注意：代码中enctry是不对的。但是懒得再重新截图了，所以就不更改了。正确的应该是entry.

4.配置css-loader
5.运行
（1）准备工作：
在最外层下载webpack依赖包(nodejs有自动往上层寻找依赖包的功能。在最外层下载后就不需要每次都下载依赖包了)
A.npm init
B.npm install webpack webpack-cli -D
C.npm install css-loader style-loader -D

（2）执行
A.回到需要运行的文件终端下

B.命令：webpack
因为entry写错而报的错误。

正确结果：



（3）验证
A.创建index.html并书写代码

B.运行index.html

注意： 1.不同文件必须配置不同loader处理，且每一个都不能复用

            2.每一个loader都需要下载安装，否则不能使用.
下图为没有安装less-loader依赖包和less依赖包报的错。

打包html文件

1.初始配置 src/index.js + src/index.html + webpack.config.js

2.指令（运行在最外层）：npm install html-webpack-plugin -D
3.引用：

4.使用：

5.运行：
注意：此时需要做一个改动：将filename中的bulid改成bulid.js文件，否则无效。

结果：
（1）生成两个文件

（2）在index.html里自动加入了
<script defer src="bulid.js"></script>

6.上面的用法会让打包后的index.html缺少body中的内容。所以需要增加新的内容。

7.运行
新的index.html文件

注意：未打包的index.html中不能再引入index.js文件。否则hi报错。

打包图片资源

1.初始配置





2.下载依赖：npm install url-loader file-loader -D
3.跟新配置文件

4.运行
结果：

5.问题：该配置下不能解析html中的img图片
6.解决上述问题，更新配置文件

（1）npm install html-loader -D
（2）运行：
结果：
原文件：

打包后的文件

如果出现src="[obkect Module]"图片是解析不出来的。
原因：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs，所以解析时会出现问题。
解决：关闭url-loader的es6模块化，使用commonJs解析

7.自定义打包后图片文件名

打包其他资源–如字体等

1.下载iconfont字体
2.初始配置



3.配置

4.运行：
结果：