1. Webpack是什么
webpack是一种前端资源构建工具，一个静态模块打包器（moudle bundler）在webpack看来，前端所有资源文件（js/json/css/img/less...）都会作为模块处理。他会根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）
放一张官网上的图感受一下
2.Webpack五个核心概念
1）Entry
入口（Entry）指示webpack以那个文件为入口起点开始打包分析构建内部依赖图
2）Output
输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名
3）Loader
Loader让webpack能够去处理那些非Javascript文件（webpack）自身只理解Javascript
4）Plugins
插件（Plugins）可以用来执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5）Mode
模式（Mode）指示webpack使用相应模式的配置
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将 process.env.NODE_ENV 的值设为development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
| production | 会将 process.env.NODE_ENV 的值设为 production 启用 FlagDependencyUsagePlugin,FlagincludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurenceOrderPlugin,SideEffectsFlagPlugin 和 UglifysPlugin | 能让代码优化上线的运行环境 |
3.初步使用webpack
运行指令
开发环境：webpack ./src/index.js -o ./bulid --mode=development webpack会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build/mian.js整体打包环境是开发环境
生产环境：webpack ./src/index.js -o ./bulid --mode=production webpack会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build/main.js整体打包环境是生产环境（代码一般压缩）
我们将index.js作为webpack打包的入口文件。
// index.js
import data from './data.json'
console.log(data)
function add(x, y) {
return x + y
}
console.log(add(1, 3));
运行webpack指令得到一个main.js文件
这是生产环境下打包index.js后的文件main.js
(()=>{"use strict";(()=>{const o=JSON.parse('{"name":"rinvay","age":18}');console.log(o),console.log(4)})()})();
得到初步结论
- webpack能默认处理 js/json 文件,不能处理css/img/html等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码
那么如果我们需要打包其他文件就需要做一些特别的配置
4.打包其他文件
4.1打包样式文件
新建一个文件夹，下面新建src目录，在里面分别新建index.js/ index.css/index.less
// index.js
// 引入样式
import './index.css'
import './index.less'
// index.css
html,
body {
margin : 0;
padding : 0;
background-color: skyblue;
height : 100%;
}
//index.less
#title {
color: #fff;
}
在外面新建webpack配置文件 webpack.config.js里面需要配置上面所说的五大要素，以及解析css、less需要的loader, 别忘了这些loader需要npm安装下载。配置详情如下。
/**
* webpack.config.js webpack的配置文件
*
* 作用：指示webpack下哪些活（当你运行webpack指令时，会加载里面的配置）
*
* 所有构建工具都是基于 nodejs平台运行的 模块化默认采用 commonjs
*/
const {
resolve
} = require('path')
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader配置
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader
{
// 匹配css文件
test: /\.css$/,
// 使用哪些loader文件进行处理
use: [
// use数组中loader执行顺序：从后往前
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
//匹配less文件
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载less-loader 和 less
'less-loader',
]
}
]
},
// plugins的配置
plugins: [
// 详细的plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
做好配置后就可以对 css / less 文件进行打包了，运行webpack这条命令，会加载上面的配置，在src同级目录下会得到一个build目录，里面会有个built.js文件，在里面新建一个index.html文件，引入build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">Hello Less</h1>
<script src="./built.js"></script>
</body>
</html>
效果如下，说明我们的index.css 和 index.less 成功引入。
4.2打包html文件
当我们有一个有结构的html文件时候，需要对html文件进行打包，在src文件新建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">Hello Html</h1>
</body>
</html>
这个时候我们需要用到 html-webpack-plugin 插件。
插件（plugins）和 加载程序（loader）的不同
loader : 下载后直接使用，配置到use这个数组里面，而plugins下载后需要用require引入之后才能使用。
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置plugins(其它配置不变)
plugins: [
// 详细的plugins的配置
// html-webpack-plugin
// 功能 默认创建一个空的HTML，自动引入打包输出所有的资源（JS/CSS）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
],
配置好后，运行webpack打包，这个时候得到 build目录里面会有两个文件，built.js和index.html这个时候发现index.html自动引入了built.js并且和src/index.html的结构一样
4.3打包图片文件
新建修改index.less文件，写入引入图片的样式。
//index.less
#box1 {
width: 100px;
height: 100px;
background-image: url('./arr.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2 {
width: 100px;
height: 100px;
background-image: url('./avater.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3 {
width: 100px;
height: 100px;
background-image: url('./logo.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
在index.html中，分别使用，并且在index.html 引入自己的图片
// index.html
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<!-- 因为这里引入img和css中有点不一样，详情看配置 -->
<img src="avater.jpg" alt="avatar">
<img src="./avater.jpg" alt="">
</body>
打包处理图片文件和 css 文件类似，需要 两个加载程序，url-loader / file- loader 详细配置如下。
{
// 问题：处理不了html中img图片 (需要用到html-loader)
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载两个 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
// 问题：因为url-loader默认使用es6m模块化解析，而html-loader引入图片是commonjs
// 解析时会出问题：[object Module]
// 解决：关闭url-loader的es6模块化，使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来的扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader',
}
运行webpack 命令，打开html文件，检查图片是否正常显示。
4.4打包其它文件
打包其它文件，比如字体文件，这样的文件只需要 file-loader 加载程序就行了。在webpack.config.js文件配置如下。
{
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
// 给文件进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来的扩展名
name: '[hash:10].[ext]'
}
}
这里我们用阿里的字体库，选择若干字体图标，下载得到一个文件夹。我们需要里面的如下文件。
在index.js引入 iconfont.css ，并在index.html中使用
执行 webpack 指令打包，打开build目录下的index.html文件，效果如下。
这里webpack的基本使用就结束了。
欢迎观看，喜欢点个关注。
