实践后加深的理解
- 1.webpack把前端的所有资源文件都视为模块并进行处理。
- 2.webpack指令运行在node平台,这才使得它具有访问和操作本地文件资源的能力。
- 3.webpack有很好的灵活性与扩展性(串联式模块加载器loader以及插件机制plugin)。
实践结果
打包后的目录结构
package.json
{
"name": "webpack_dev_test",
"version": "1.0.0",
"devDependencies": {
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
webpack.config.js
const {
resolve } = require('path');
// 插件需引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:"./src/js/entry.js",
output:{
path:resolve(__dirname,'build'),
filename:'js/built.js'
},
module:{
rules:[
{
// 文件名正则配对
test:/\.less$/,
// 先使用的loader放在数组的后面
use:['style-loader','css-loader','less-loader']
},
{
// 文件名正则配对
test:/\.css$/,
// 先使用的loader放在数组的后面
// 这里对css文件先使用css-loader翻译成css字符串
// 而后使用style-loader参考该字符串新建一个style样式标签插入head标签中
use:['style-loader','css-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,// 小于8kb的图片以base64字符串方式存储
name: '[hash:10].[ext]',// 缩短命名
esModule:false,
outputPath: 'images'
}
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins:[
/**
* 此插件功能:
1.创建一个空的HTML文件,并自动引入打包输出的所有资源。
2.可指定template作为模板。
*/
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
mode:'development'
};
实践准备
创建项目:webpack_dev_test
打包目标
初始化
npm init
// 未全局安装请先执行:npm i webpack webpack-cli -g
npm i webpack webpack-cli -D
- src/js/entry.js:空文件
- webpack.config.js
const {
resolve } = require('path');
// webpack指令运行在node平台,此文件的模块化规范使用commonJS
module.exports = {
// 指定入口路径
entry:"./src/js/entry.js",
// 指定输出路径
output:{
path:resolve(__dirname,'build'),
filename:'js/built.js'
},
module:{
},
plugins:[],
// 指定模式为开发环境
mode:'development'
};
- 此时文件目录为
实践过程
一:打包js/json文件
不需要额外的loader和plugin就可以编译打包js和json文件。
- 1.src/js/test.js:被打包的js文件
function fn(){
console.log("test.js")
}
export default{
fn
};
- 2.src/data/test.json:被打包的json文件
{
"username":"admin",
"password":"123456"
}
- 3.src/js/entry.js:被打包的入口文件
import testJs from './test.js'
import testJson from '../data/test.json'
testJs.fn();
console.log(testJson);
- 4.webpack.config.js:webpack打包时读取的配置文件
文件内容与上文的webpack.config.js内容一致,不需要配置额外的loader和plugin。 - 5.打包信息
- 6.打包结果
- 7.运行结果(新建临时的test.html引入上述构建后的built.js)
<script src="built.js"></script>
二:打包HTML文件
- 1.src/index.html:被打包的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
</body>
</html>
- 2.plugin:html-webpack-plugin的下载与配置
npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...,
plugins:[
/**
* 此插件功能:
1.创建一个空的HTML文件,并自动引入打包输出的所有资源。
2.可指定template作为模板。
*/
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
...
}
- 3.打包信息(entry.js文件内容已清空)
- 4.build/index.html:打包生成的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<script type="text/javascript" src="js/built.js"></script></body>
</html>
三:打包样式文件
1.打包css文件
-1. src/css/test.css:被引入的css文件
.css-style{
width:200px;
height:200px;
background: red;
}
- 2.src/js/entry.js:引入css文件
import '../css/test.css'
- 3.loader:css-loader、style-loader的下载与配置
npm i css-loader style-loader -D
module.exports = {
...,
module:{
rules:[
...,
{
// 文件名正则配对
test:/\.css$/,
// 先使用的loader放在数组的后面
// 这里对css文件先使用css-loader翻译成css字符串
// 而后使用style-loader参考该字符串新建一个style样式标签插入head标签中
use:['style-loader','css-loader']
},
...
]
}
...
}
- 4.打包信息(顺便打包index.html文件)
css文件内容被打包进built.js文件中。
- 5.build/index.html:这是顺便打包后的用于测试css的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<div class="css-style"></div>
<script type="text/javascript" src="js/built.js"></script></body>
</html>
- 6.运行结果(css文件打包成功并生效)
2.打包less文件
- 1.src/css/less/test.less:被引入的less文件
.less-style{
width: 200px;
height: 200px;
background: yellow;
}
- 2.src/js/entry.js:引入less文件
import '../css/less/test.less'
- 3.loader:less-loader(所依赖的less模块也需下载)、css-loader、style-loader的下载与配置
// npm i css-loader style-loader -D //上文已下载
npm i less-loader less -D
module.exports = {
...,
module:{
rules:[
...,
{
// 文件名正则配对
test:/\.less$/,
// 先使用的loader放在数组的后面
use:['style-loader','css-loader','less-loader']
},
...
]
}
...
}
- 4.打包信息
翻译成css后被打包进built.js文件中。
- 5.build/index.html:这是顺便打包后的用于测试css的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<div class="less-style"></div>
<script type="text/javascript" src="js/built.js"></script></body>
</html>
- 6.运行结果(css文件打包成功并生效)
四:打包图片资源
1.css中引入的图片
- 1.被打包的三张图片及其大小
- 2.src/css/testImg.css:引入图片的css文件
#box1{
width: 100px;
height: 100px;
background-image: url('../imgs/vue.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width: 200px;
height: 200px;
background-image: url('../imgs/react.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box3{
width: 300px;
height: 300px;
background-image: url('../imgs/angular.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
- 3.src/js/entry.js:入口文件
import '../css/testImg.css'
- 4.loader:除加载css相关loader外,还需下载配置url-loader、file-loader
// css相关loader下载
// 图片相关loader下载
npm i url-loader file-loader -D
module.exports = {
...,
module:{
rules:[
...,
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
// 文件名正则配对
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,// 小于8kb的图片以base64字符串方式存储
name: '[hash:10].[ext]',// 缩短命名
outputPath: 'images'
}
},
...
]
},
...
}
-
5.打包信息和构建结果
-
6.build/index.html:这是顺便打包后的用于测试图片打包的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script type="text/javascript" src="js/built.js"></script></body>
</html>
- 7.运行结果(图片文件打包成功并生效)
2.HTML中引入的图片
- 1.被打包的三张图片及其大小
- 2.src/index.html:引入被打包图片的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<img src="./imgs/vue.jpg" alt="vue">
<img src="./imgs/react.png" alt="react">
<img src="./imgs/angular.jpg" alt="angular">
</body>
</html>
- 3.loader:除url-loader、file-loader外,还需要html-loader的下载与配置。
与加载css文件中的图片不同的是,这里需配置url-loader的模块化规范为commonJS(esModule:false)以兼容处理html-loader加载的结果
// url-loader以及file-loader
// html-loader
npm i html-loader -D
module.exports = {
...,
module:{
rules:[
...,
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,// 小于8kb的图片以base64字符串方式存储
name: '[hash:10].[ext]',// 缩短命名
esModule:false,// 默认es6模块化规范,转为使用commonJS规范兼容处理html-loader解析结果
outputPath: 'images'
}
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader'
},
...
]
},
...
}
- 4.打包信息与构建结果(entry.js内容已清空)
- 5.build/index.html:打包后的index.html
可以看到第一个img,4kb的vue图片被翻译为base64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<img src="data:image/jpeg;base64,/9jxxxxxxxxxx" alt="vue">
<img src="images/13c51607b8.png" alt="react">
<img src="images/9a4a32dc0c.jpg" alt="angular">
<script type="text/javascript" src="js/built.js"></script></body>
</html>
- 运行结果
五:打包其它资源
- 1.被打包的其它资源
- 2.src/css/iconfont.css:引入该资源的css文件
@font-face {
font-family: "iconfont";
src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */
src: url('../media/iconfont.eot?t=1581833245354#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;b/xxxxxxxxx') format('woff2'),
url('../media/iconfont.woff?t=1581833245354') format('woff'),
url('../media/iconfont.ttf?t=1581833245354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../media/iconfont.svg?t=1581833245354#iconfont') format('svg'); /* iOS 4.1- */
}
...
- 3.src/js/entry.js:引入包含这些其它资源的css文件
import '../css/iconfont.css'
- 4.loader:file-loader的下载(上文已下载)与配置
module.exports = {
...,
module:{
rules:[
...,// 包含css文件的loader配置
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]},
...
}
- 5.打包信息与构建结果
- build/index.html:顺便打包的用来测试打包是否成功的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDevTest</title>
</head>
<body>
<H1>template of src/index.html</H1>
<span class="iconfont icon-icon-test"></span>
<span class="iconfont icon-icon-test2"></span>
<span class="iconfont icon-icon-test3"></span>
<span class="iconfont icon-icon-test1"></span>
<script type="text/javascript" src="js/built.js"></script></body>
</html>
- 运行结果(字体图标正常显示,打包成功)