Webpack是什么
Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。在Webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。
在这里插入图片描述
Webpack 五个核心概念
Entry
入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output
输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
Loader
Loader让Webpack能够去处理那些非JavaScript文件（Webpack自身只能理解JavaScript）。
Plugins
插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode
模式（Mode）指示Webpack使用相应模式的配置。
在这里插入图片描述
Webpack初试
- 新建pacakge.json文件
npm init - 安装webpack和webpack-cli
npm install webpack webpack-cli -D
-S
即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D
即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器
- 通过webpack打包文件
/*index.js文件*/
import data from './data.json';
console.log(data);
function add(x,y) {
return x + y;
}
console.log(add(1,2));
/*data.json文件*/
{
"name": "Cecilia",
"age": 20
}
在控制台输入（二者其一）：
webpack ./src/index.js -o ./build/built.js --mode=development
webpack ./src/index.js -o ./build/built.js --mode=production
控制台将打印：
{ name: 'Cecilia', age: 20 }
3
index.js: webpack入口起点文件
1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js
整体打包环境是开发环境
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js
整体打包环境是生产环境
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3.生产环境比开发环境多一个js压缩代码
Webpack基本配置
配置webpack.config.js文件
webpack.config.js ----- webpack的配置文件
作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）。
所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs。
//resolve用来拼接绝对路径的方法
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配置
]
},
//plugins的配置
plugins: [
//详细plugins配置
],
//模式
mode: 'development' //开发模式
// mode: 'production'
};
打包样式资源
- 在src目录下新建css和less文件：
/*index.css文件*/
html,body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
/*index.less文件*/
#title {
color: #ffffff;
}
- 配置webpack.config.js文件：
/*webpack.config.js文件*/
const { resolve } = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
//不同文件必须配置不同loader处理
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
//use数组中loader执行顺序：从右到左，从上到下依次执行
//创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载到js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
//将less文件编译成css文件
//需要下载less-loader和less两个包
'less-loader'
]
}
]
},
plugins: [
//详细plugins配置
],
mode: 'development'
};
- 下载相关包：
npm install style-loader css-loader less-loader less -D - 在index.js文件中引入样式资源：
/*index.js文件*/
//引入样式资源
import './index.css';
import './index.less';
- 输入打包命令：
webpack - 在bulid目录下生产打包后的bulit.js文件
- 在html文件中引入打包后的js文件：
<!--index.html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<!-- 引入打包后的js文件-->
<script src="built.js"></script>
<h1 id="title">hello webpack</h1>
</body>
</html>
打包html资源
- 在src目录下新建index.html文件和index.js文件：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
</body>
</html>
/*src/index.js*/
function add(x,y) {
return x + y;
}
console.log(add(2,3));
- 配置webpack.config.js文件：
/*webpack.config.js文件*/
/*
loader：1.下载 2.使用（配置loader）
plugins：1.下载 2.引入 3.使用
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
loader: {
rules: [
//详细loader配置
]
},
plugins: [
//html-webpack-plugin
//功能：默认会创建一个空的HTML文件，自动引入打包输出所有的资源（JS/CSS）
//需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
//复制"./src/index.html"文件，并自动引入打包输出所有的资源（JS/CSS）
template: "./src/index.html"
})
],
mode: "development"
};
- 下载相关包：
npm install html-webpack-plugin -D - 输入打包命令：
webpack - 在bulid目录下生成打包后的bulit.js文件，并创建index.html文件,自动将所有打包输出的资源引入该html文件中。
<!--bulid/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<h1 id="title">hello html</h1>
<script src="built.js"></script></body>
</html>
在该html文件中，会显示打包后的html资源，也会显示js资源（即在控制台打印5）。
注意：使用html-webpack-plugin插件会自动引入所有资源，不需要自己再引入，避免重复引入。
打包图片资源
- 在src目录下新建index.html和index.less文件：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="img/react.jpg" alt="react">
</body>
</html>
/*src/index.less*/
#box1{
width: 100px;
height: 100px;
background-image: url("img/angular.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width: 200px;
height: 200px;
background-image: url("img/vue.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
background-image: url("img/react.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
- 在src目录下新建index.js文件，引入样式资源：
/*src/index.js*/
import './index.less';
- 配置webpack.config.js文件：
/*webpack.config.js*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
//使用多个loader处理用use
use: ['style-loader', 'css-loader', 'less-loader']
},
{
//问题：默认处理不了html中img标签引入的图片
//处理图片资源
test: /\.(jpg|png|gif)$/,
//使用一个loader
//下载url-loader file-loader
loader: 'url-loader',
options: {
//图片大小小于8kb，就会被base64处理
//优点：减少请求数量（减轻服务器压力）
//缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
//问题：因为url-loader默认使用es6模块化解析，而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'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
};
- 下载相关包：
npm install url-loader file-loader html-loader -D - 输入打包命令：
webpack - 在build目录下生成打包后的built.js文件，并生成新的index.html文件，将built.js引入。
<!--bulid/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="4454005113.jpg" alt="react">
<script src="built.js"></script></body>
</html>
关于limit: 8 * 1024：
在这里插入图片描述
只有两张图片被打包（小于8kb）
在这里插入图片描述
尝试的时候打包了两次，第二次以hash前十位重命名，生成了两次文件
name: '[hash:10].[ext]'在这里插入图片描述
小于8kb的图片被base64压缩为字符串格式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
打包其他资源
-
将iconfont所需资源下载到本地，引入src目录下：
在这里插入图片描述 - 在src目录下新建index.html，使用iconfont：
<!--src/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<span class="iconfont .icon-icon-test"></span>
<span class="iconfont .icon-icon-test1"></span>
<span class="iconfont .icon-icon-test2"></span>
<span class="iconfont .icon-icon-test3"></span>
<span class="iconfont .icon-icon-test4"></span>
<span class="iconfont .icon-icon-test5"></span>
<span class="iconfont .icon-icon-test6"></span>
</body>
</html>
- 在src目录下新建index.js文件，并引入iconfont样式文件：
/*src/index.js*/
//引入iconfont样式文件
import './iconfont.css';
- 配置webpack.config.js文件：
/*webpack.config.js*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
//打包其他资源（除了html/js/css/less资源以外的资源）
{
//排除css/html/js/less资源
exclude: /\.(css|html|js|less)$/,
loader: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development"
};
- 输入打包命令：
webpack - 在build目录下生成打包后的built.js文件，并且新生成index.html文件，将built.js文件引入。
devServer
- 在webpack.config.js中配置devServer：
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: "built.js",
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
esModule: false,
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode: "development",
//开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
//特点：只会在内存中编译打包，不会有任何输出
//启动devServer指令为：npx webpack-dev-server
devServer: {
//项目构建后路径
contentBase: resolve(__dirname, 'build'),
//启动gzip压缩
compress: true,
//端口号
port: 3000,
//自动打开浏览器
open: true
}
};
- 下载相关包：
npm install webpack-dev-server -D - 启动devServer：
npx webpack-dev-server
