实践后加深的理解

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>

运行结果（字体图标正常显示，打包成功）

webpack 开发环境打包【实践】

实践后加深的理解

实践结果

打包后的目录结构

package.json

webpack.config.js

实践准备

创建项目：webpack_dev_test

打包目标

初始化

实践过程

一：打包js/json文件

二：打包HTML文件

三：打包样式文件

1.打包css文件

2.打包less文件

四：打包图片资源

1.css中引入的图片

2.HTML中引入的图片

五：打包其它资源

猜你喜欢