• 前端入门 —— 了解 webpack 和 各类插件的配置

    文章目录

    0、前言

    下面是以 隔行变色 为例，讲解使用 webpack 做开发前端 和 webpack 的各种插件的配置。

    通过示例，让大家 了解 webpack 各种配置的含义和使用步骤，不需要大家掌握。 在 实际开发中，只需一键即可生成 webpack 这些配置。

    学习前提：

    • npm 已经下载和配置完毕

    1、 练习之隔行变色（引入 webpack ）

    基础代码编写

    1）新建 change-rows-color 目录，并目录中运行 npm init -y 命令，初始化管理配置文件 package.json

    2）新建 src 源代码目录

    3）新建 src -> index.html 首页 和 src -> index.js 脚本

    4）初始化首面基本的结构

    （1）快速 生成 html 页面结构

    !

    • 1

    没错，使用一个! 即可快速生成 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>titletitle>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    （2）编写代码

    ul>li{这是第$ 个li}*9

    • 1

    使用快捷键 快速 生成如下代码：

    <ul>
    <li>这是第1 个lili>
    <li>这是第2 个lili>
    <li>这是第3 个lili>
    <li>这是第4 个lili>
    <li>这是第5 个lili>
    <li>这是第6 个lili>
    <li>这是第7 个lili>
    <li>这是第8 个lili>
    <li>这是第9 个lili>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    5）运行 npm install jquery -S 命令，安装jQuery

    i  是 install 的简写
-S 是 --save  的简写
-D 是 --save-dev 的简写

npm install jquery -S 
等价于
npm i jquery -S 
等价于
npm install jquery --save

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    6）通过 ES6 模块化的方式导出jQuery，实现列表隔行变色效果。

    在 index.js 中编写如下代码。

    // 1. 使用ES6导入语法，导入jquery

import $ from 'jquery'

// 2. 定义；jQuery的入口函数
$(function(){
    //3.实现奇偶行变色
    $("li:odd").css("background-color", 'red')
    $("li:even").css("background-color", 'pink')
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    7） index.html 引入 index.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>indextitle>
	<script src="./index.js">script>
head>
<body>

	<ul>
		<li>这是第1 个lili>
		<li>这是第2 个lili>
		<li>这是第3 个lili>
		<li>这是第4 个lili>
		<li>这是第5 个lili>
		<li>这是第6 个lili>
		<li>这是第7 个lili>
		<li>这是第8 个lili>
		<li>这是第9 个lili>
	ul>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在浏览器中报异常，出现不兼容问题。

    2、 webpack 实时打包服务

    使用 webpack 进行打包，解决不兼容问题。

    2.1、安装 webpack

    安装webpack 相关的两个包：webpack、 webpack-cli

    npm install webpack@5.42.1 webpack-cli@4.7.2 -D

    • 1

    说明：-D 是 --save-dev 的简写 。

    在这里插入图片描述

    在这里插入图片描述

    说明：

    dependencies： 开发、上线部署都会用的插件
    devDependencies： 只在开发阶段用到的插件，上线部署不使用。

    2.2、配置 webpack

    1）在change-rows-color 项目根目录 创建 webpack.config.js，内容如下。

    // 使用node.js 中的导出语法，向外导出一个webpack的配置对象

module.exports={
    // mode用来指定构建模式，可选值有 development 和 production
    mode:'development' 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2）在 package.json 的 scripts 中添加 webpack 配置

    在这里插入图片描述

      "scripts": {
    "dev":"webpack"
  },

    • 1
    • 2
    • 3

    说明：

    • dev 不是固定的，可以是任意字符串。只要确保 npm 脚本名称一致即可。

      当是 dev， 则脚本是 npm run dev，当是 abc ，则脚本是 npm run abc，当是 xxx ，则脚本是 npm run xxx。

      无论是 dev，还是 abc、xxx ，都只是一个代号，最终执行的是对应的值，即 webpack 。

    • webpack 是固定值，不可以变动。

    2.3、运行 webpack

    运行 npm run dev ，启动 webpack 进行项目的打包构建

    在这里插入图片描述

    说明：使用 npm run dev ， 也可以使用 npm run abc 、 npm run xxx 等，与上一步骤参数有关。

    脚本执行后，生成 dist 目录和 main.js 文件。如下所示。

    在这里插入图片描述

    2.4、修改隔行变色代码

    1） 修改引用的脚本

    将 index.html 中的脚本由 index.js 改为 main.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>indextitle>
	<script src="../dist/main.js">script>
head>
<body>

	<ul>
		<li>这是第1 个lili>
		<li>这是第2 个lili>
		<li>这是第3 个lili>
		<li>这是第4 个lili>
		<li>这是第5 个lili>
		<li>这是第6 个lili>
		<li>这是第7 个lili>
		<li>这是第8 个lili>
		<li>这是第9 个lili>
	ul>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    2）浏览

    在这里插入图片描述

    2.5、webpack 中 开发模式和产品模式 区别

    在 webpack.config.js 中， mode:'development' 时，执行 npm run dev ， 生成的 main.js是 324kb，耗时564ms。

    在这里插入图片描述

    webpack.config.js 中 mode:'production' 时，执行 npm run dev ， 生成的 main.js是 88.3kb，耗时2799ms。

    在这里插入图片描述

    开发时，一定要使用 development 模式，节省时间。

    上线，部署时，使用 production ， main.js 要进行压缩，耗时更长。

    2.6、webpack 输入（entry）和输出（output）

    在这里插入图片描述

    webpack.config.js 配置如下：

    // 使用node.js 中的导出语法，向外导出一个webpack的配置对象
const path = require('path')

module.exports={
    // mode用来指定构建模式，可选值有 development 和 production
    mode:'development' ,
    
    // 更改打包入口
    entry: path.join(__dirname,'./src/index1.js'),
    
    // 更改打包输入目录和文件名
    output:{
        path: path.join(__dirname,'dist2'),
        filename: 'bundle.js'
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3、webpack-dev-server：自动编译和打包

    3.1、安装

    npm install webpack-dev-server@3.11.2 -D

    • 1

    3.2、配置

     "scripts": {
    "dev": "webpack serve"
  },

    • 1
    • 2
    • 3

    再次运行 npm run dev， 重新进行项目的打包

    在浏览器中访问 http://localhost:8080， 查看自动打包效果。

    webpack-dev-server 会启动一个 实时打包的http 服务器

    在这里插入图片描述

    3.3、执行npm run dev 出现异常

    > change-rows-color@1.0.0 dev
> webpack serve

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (H:\space\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:173:21)
    at ServeCommand.apply (H:\space\change-rows-color\node_modules\@webpack-cli\serve\lib\index.js:41:19)
    at loadCommandByName (H:\space\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:907:35)
    at async Command. (H:\space\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:1462:17)
    at async Promise.all (index 0)
    at async WebpackCLI.run (H:\space\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:1500:9)
    at async runCLI (H:\space\change-rows-color\node_modules\webpack-cli\lib\bootstrap.js:11:9)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    解决方法

    无法加载“@webpack cli/service”命令,未下载@webpack cli/service，则下载webpack cli 。

    执行下面的 webpack cli 安装命令：

    npm i  webpack-cli  -D

    • 1

    说明：

    • i 是install 的简写。
    • -D 是 --save-dev 的简写，安装包写入 devDependencies（开发环境）。

    运行 npm run dev 后，每当代码修复后，会自动进行项目的打包。打包日志如下。

    在这里插入图片描述

    这里发现个问题：修复 index.js后，虽然进行的打包，但是页面未变化。

    原因是 打包生成的 main.js 在根目录的内存中，并没有保存到 dist/main.js 。

    3.4、隔行变色代码优化，使用内存中的 main.js

    webpack-dev-server 生成的 main.js 在项目的根目录，并且在内存中，磁盘中无法使用，所以看不到。

    可以通过 http://127.0.0.1/main.js 能访问到。

    inde.html 中对 main.js 的引用

    
<script src="/main.js">script>

    • 1
    • 2

    3.5、devServer 节点配置

    devServer 节点对 webpack-dev-server 插件进行更多的配置。

    webpack.config.js 配置：

    ....（无关的内容省略）
module.exports={   
    mode:'development',
    plugins:[htmlPlugin] , 
    
    devServer:{
    	open: true,   // 初次打包后，自动打开浏览器
    	host:'127.0.0.1', // 实时打包使用的主机地址
    	port:80, // 实时打包所使用的端口号
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    注意：凡是修改 webpack.config.js 配置，或修改了 package.json 配置文件，必须重启实时打包服务，配置才能生效。

    4、html-webpack-plugin：复制页面

    安装命令：

    npm i html-webpack-plugin@5.3.2 -D

    • 1

    webpack.config.js 配置：

    const path = require('path')

// 1、导入html插件
const HtmlPlugin = require('html-webpack-plugin')

// 2、创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html', // 指定原文件的存放路径
    filename:'./index.html',     // 指定生成的文件的存放路径
})

module.exports={  
    mode:'development',
    plugins:[htmlPlugin] , // 3、通过plugins 节点，使htmlPlugin插件生效
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    html-webpack-plugin 有两个功能：

    • 复制页面

    • 注入脚本

    5、 loader 代码加载器

    5.1、style-loader ：打包处理 css 文件

    style-loader 用于 打包处理 css 文件。

    安装

    npm i style-loader@3.0.0 css-loader@5.2.6 -D

    • 1

    配置

    在 webpack.config.js 的 module -> rules 数组中

    module :{
	rules:[
		{ test:/\.css$/ ,use:['style-loader','css-loader'] }
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5

    说明，test 表示匹配的文件类型， use 表示对应要调用的 loader

    • use 数组 中指定的 loader 顺序是固定的。

    • 多个 loader 的调用顺序是：从后往前 调用。

    测试

    创建文件 src\css\index.css ，内容如下：

    li{
    list-style:decimal-leading-zero;
}

    • 1
    • 2
    • 3

    index.js 内容：

    import './css/index.css'

    • 1

    效果

    重新执行命令：

    npm run dev

    • 1

    在这里插入图片描述

    5.2、less、less-loader：打包处理 less 文件

    less 、less-loader 用于 打包处理 less 文件。

    安装

    npm i less-loader@10.0.1 less@4.1.1 -D

    • 1

    配置

    在 webpack.config.js 的 module -> rules 数组中

    module :{
	rules:[
		{ test:/\.less/ ,use:['style-loader','css-loader','less-loader'] }
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5

    测试

    创建文件 src\css\index.less，内容如下：

    html,
body,
ul{
    margin: 0;
    padding: 1;
    li{
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    index.js 内容：

    import './css/index.less'

    • 1

    效果

    重新执行命令：

    npm run dev

    • 1

    在这里插入图片描述

    5.3、url-loader、file-loader：打包与 url 路径相关 的文件

    url-loader、file-loader 用于 打包处理样式表中与 url 路径相关 的文件

    安装

    npm i url-loader@4.1.1 file-loader@6.2.0 -D

    • 1

    配置

    在 webpack.config.js 的 module -> rules 数组中

    module :{
	rules:[
		{ test:/\.jpg|png|gif$/ ,use:['url-loader?limit=22229'] }
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5

    其中 ? 之后的是 loader 的参数项 ：

    • limit 用来指定图片的大小，单位是字节（byte） 。limit 的值是自定义的，22229是随边写的。

    • 当图片的大小 ≤ limit 的值时，会被转为 base64 格式的图片。

    测试

    创建 src下的 images目录，里面有 baidu.png 图片。

    index.html 内容：

    

    • 1

    index.js 内容：

    // 1. 导入图片
import baidu from './images/baidu.png'

// 2. 给img标签的src动态赋值
$('.box').attr('src',baidu)

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    5.4、babel-loader ：打包处理 js 文件中的高级语法

    webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

    babel 官网上相关配置说明： https://babeljs.io/docs/en/babel-plugin-proposal-decorators

    例如 webpack 无法处理下面的 JavaScript 代码

    // 1. 定义名为info的装饰器
function info(target){
	// 2. 为目标添加静态属性info
	target.info='Person info'
}

// 3. 为Person类应用info装饰器
@info
class Person{}

// 4. 打印Person的静态属性info
console.log(Person.info)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    安装

    npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

    • 1

    配置

    1）在 webpack.config.js 的 module -> rules 数组中

    module :{
	rules:[
		{ test:/\.js$/ ,use:'babel-loader', exclude:/node_modules/ }
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5

    2）在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

    module.exports={
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]],
}

    • 1
    • 2
    • 3

    6、打包

    1）为什么要打包发布？

    项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

    ① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

    ② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

    为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布

    2）配置 webpack 的打包发布

    在 package.json 文件的 scripts 节点下，新增 build 命令如下

    "scripts": {
    "dev": "webpack serve",
    "build":"webpack --mode production"
}

    • 1
    • 2
    • 3
    • 4

    --model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

    注意： 通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

    3）把 JavaScript 文件统一生成到 js 目录中

    在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

    output:{
    path:path.join(__dirname,'dist'),
    filename:'js/bundle.js',
},

    • 1
    • 2
    • 3
    • 4

    4）把图片文件统一生成到 image 目录中

    修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径。

    在 module.exports -> module ->rules ，

    // 1. 将原来的 url-loader 配置中增加 outputPath 参数
{ test:/\.jpg|png|gif$/ ,use:['url-loader?limit=29&outputPath=images'] },

    • 1
    • 2

    或者，如下配置：

    {
    test:/\.jpg|png|gif$/,
    use: {
        loader: 'url-loader',
        options:{
            limit: 28,
            outputPath:'images'
        }
    }
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    5）自动清理 dist 目录下的旧文件

    为了在每次打包发布时自动清理掉 dist 目录中的 旧文件，可以安装并配置 clean-webpack-plugin 插件

    安装 clean-webpack-plugin 插件

    npm install clean-webpack-plugin@3.0.0 -D

    • 1

    导入插件

    在 webpack.config.js ，配置如下：

    // 得到插件，创建插件实例对象
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()


// 把创建的插件对象cleanPlugin，挂载到 plugins 节点下
module.exports={
	plugins:[cleanPlugin],
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    6）打包

    npm run build

    • 1

    在这里插入图片描述

    7、Source Map

    前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：

    对压缩混淆之后的代码除错（debug）是一件极其困难的事情。

    7.1、什么是 Source Map

    Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的

    代码，所对应的转换前的位置。

    有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

    7.2、解决默认 Source Map 的问题

    开发环境配置

    推荐在 webpack.config.js 中添加如下的配置，即可保证 运行时报错的行数与源代码的行数 保持一致。

    保持一致。

    module.exports={
    // ... 省略其它配置项
    devtool:'eval-source-map',
    // ... 省略其它配置项
}

    • 1
    • 2
    • 3
    • 4
    • 5

    生产环境

    在生产环境下，建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map ，好处是 防止源码泄露，提高网站的安全性。

    module.exports={
    // ... 省略其它配置项
    devtool:'nosources-source-map',
    // ... 省略其它配置项
}

    • 1
    • 2
    • 3
    • 4
    • 5

    8、实际开发中需要自己配置 webpack 吗？

    答案：不需要！

    • 实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目
    • 开箱即用，所有 webpack 配置项都是现成的！
    • 我们只需要知道 webpack 中的基本概念即可！

    9、webpack中@的使用

    resolve:{
    alias:{
    	// 告诉webapck，@符号表示src这一层目录
        '@':path.join(__dirname,'./src/')
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    10、总结

    • 能够掌握 webpack 的基本使用
    安装、webpack.config.js、修改打包入口

    • 1
    • 了解常用的 plugin 的基本使用
     webpack-dev-server、html-webpack-plugin

    • 1
    • 了解常用的 loader 的基本使用
    loader 的作用、loader 的调用过程

    • 1
    • 能够说出 Source Map 的作用
    精准定位到错误行并显示对应的源码
方便开发者调试源码中的错误

    • 1
    • 2
  • 相关阅读:
    SOA和微服务是一回事吗
    单个vue echarts页面
    Vscode LinuxC++环境配置
    Spring 更简单的读取和存储对象
    银行分布式存储基础设施创新实践分享
    算法刷题第四天：双指针--3
    手机销量下降，企业该如何调整使用APS计划排产软件生产计划？
    SpringBoot文件上传和下载
    黑客技术-小白自学
    【入门】初识深度学习
  • 原文地址：https://blog.csdn.net/xiaojin21cen/article/details/126334944