Webpack

文章目录

Webpack

1.webpack基础

1.1.初始化隔行变色的案例

1.新建一个英文路径下的根目录，在根目录的终端中输入以下命令

npm init -y

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VHokc8oQ-1671884900117)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213211950758.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XDiW7pt-1671884900119)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213212136135.png)]$

2.在根目录下中新建src目录，在src目录下新建index.html和index.js

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>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>

</body>
</html>

index.js

// 1.使用 es6 导入语法 ，导入jQ
import $ from 'jquery'

// 2.定义jQ的入口函数
$(function(){
    
    
    // 3.实现奇偶行变色效果
    $('li:odd').css('background-color', '#252526');
    $('li:even').css('background-color', '#fdf5e3')
})

3.测试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QUSRSAv-1671884900119)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213212203910.png)]$

发现出现错误：SyntaxError（语法错误）

原因：浏览器无法适配高级语法

解决方法：安装和配置webpack

1.2.安装和配置webpack

1.2.1.安装webpack

在项目根目录下的终端输入以下命令

npm install [email protected] [email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PkzGswW3-1671884900120)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213212345703.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LhaBK1Jq-1671884900121)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213212506699.png)]$

注意：

-S 是 --save 的简介

-D 是 --save-dev的简介

1.2.2.配置webpack

1.在项目根目录下，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development'
}

2.在package.json的scripts节点下，新增dev脚本如下：

scripts 节点下的脚本，可以通过 npm run 执行，如 npm run dev

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZWXrV0u-1671884900122)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213214136399.png)]$

3.在终端中运行npm run dev命令，启动webpack进行项目的打包构建

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HxEURSdP-1671884900123)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213214311015.png)]$

可以发现，在根目录下多了一个dist目录

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t5Ag8SHA-1671884900123)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213214425707.png)]$

4.打开src目录下的index.html，引入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>Document</title>
   <!--  <script src="./index.js"></script> -->
   <script src="../dist/main.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>

</body>
</html>

5.测试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ifJbuvp8-1671884900124)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213214708864.png)]$

1.2.3.了解mode可选值的应用场景

压缩的main.js

将 mode的development改为production，最后重新npm run dev

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8GYxddR-1671884900124)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213215032074.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7Dpypow-1671884900124)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213215143298.png)]$

结论：

在开发阶段，mode应选择development

在上线阶段，mode应选择production

1.2.4.自定义打包的入口和出口

1.在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口，通过 output 节点指定打包的出口。

代码示例如下：


// 导入 node.js 中装满操作路径的模块
const path = require('path')

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    // entry : '执行要处理哪个文件'
    // __dirname 表示当前文件所处的目录
    entry : path.join(__dirname,'./src/index1.js'), // 打包入口文件的路径

    // 指定生成的文件要存放到哪里
    output : {
    
    
        // 存放的目录
        path: path.join(__dirname, 'dist'), //输入文件的存放路径
        // 生成的文件名
        filename : 'bundle.js' // 输入文件的名称
    }
}

2.测试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVcOq88m-1671884900125)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213221238571.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32QDBrpv-1671884900125)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213221320476.png)]$

3.修改index.html中的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>
   <!--  <script src="./index.js"></script> -->
   <script src="../dist/bundle.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSzlCU79-1671884900126)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221213221429127.png)]$

2.插件

2.1.安装和配置webpack-dev-server

作用：实时打包

2.1.1.安装webpack-dev-server

在根目录的终端中运行如下命令：

npm install [email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-91lQ6q4A-1671884900126)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214110737015.png)]$

2.1.2.配置webpack-dev-server

1.修改 package.json -> scripts 中的 dev 命令如下：

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

scripts节点下的脚本，可以通过 npm run 执行

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

这里报以下错误

Webpack报错Unable to load ‘@webpack-cli/serve‘ command

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwLn2TLe-1671884900126)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214112730570.png)]$

查看 webpack版本 npx webpack --version，发现找不到命令

解决步骤：

1.无法加载 @webpack cli/service 命令,未下载 @webpack cli/service，则下载 webpack cli

（i是 install的简写,-D与 --save-dev的简写，安装包写入 devDependencies (开发环境)中）

2.执行以下命令

npm i --save-dev webpack-cli

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ezQIUuli-1671884900127)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214113001953.png)]$

3.再次执行 npx webpack --version

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDpt2qCe-1671884900127)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214113142089.png)]$

4.查找官方文档发现：

（1）我使用的是 webpack v5 （ webpack v4 或更高版本），要想webpack从命令行调用，还需要安装 cli。

（2)是否使用–save-dev 取决于自己的用例。假设仅将 webpack 用于捆绑，那么建议您使用–save-dev选项安装它，因为不会在生产构建中包含 webpack。否则可以忽略–save-dev。

（3)–save-dev可在前，也可以在最后。

解决结论：

要学会看报错代码段，结合官方文档解决问题。

重新执行 npm run dev

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8P4THpw-1671884900127)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214113343725.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wyAjiUtx-1671884900128)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214114500919.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-98KKwUGd-1671884900128)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214114533889.png)]$

发现一个问题：修改index1.js中的css样式，发现浏览中并没有生效

// 1.使用 es6 导入语法 ，导入jQ
import $ from 'jquery'

// 2.定义jQ的入口函数
$(function(){
    
    
    // 3.实现奇偶行变色效果
    $('li:odd').css('background-color', '#fc5531');
    $('li:even').css('background-color', '#91a7d4');
})

解决：

webpack output is served from /

webpack将生成的bundle.js放于根目录下了（内存中）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZJ205ThN-1671884900128)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214114807137.png)]$

删除dist目录,并修改index.html的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>
   <!--  <script src="./index.js"></script> -->
   <!-- <script src="../dist/bundle.js"></script> -->
   <!-- 加载和引用内存中的 bundle.js -->
   <script src="/bundle.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>

</body>
</html>

测试：

成功生效

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxtvHGeM-1671884900129)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214115421165.png)]$

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

2.2.安裝和配置html-webpack-plugin

作用：让src目录复制一份放到首页中，一访问 localhost:8080 就会直接跳转到src目录下的index.html页面，并且在复制出来的 index.html 里边注入一个脚本文件 <script src="/bundle.js"></script>

2.2.1.安装html-webpack-plugin

在根目录下运行如下命令，即可在项目中安装此插件：

npm install [email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32WjjVcP-1671884900129)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214164545489.png)]$

2.2.2.配置html-webpack-plugin

// 1.导入 HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

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


// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    plugins : [htmlPlugin], // 3.通过 plugins 节点，使用 htmlPlugin 插件生效

}

这时候再次访问 http://localhost:8080/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xliNsVFr-1671884900129)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214165606986.png)]$

2.2.3.devServer节点

在 webpack.config.js配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    plugins: [htmlPlugin], // 通过 plugins 节点，使用 htmlPlugin 插件生效

     devServer : {
    
    
        open : true,        // 初次打包完成后，自动打开浏览器
        host : '127.0.0.1', // 实时打包所使用的主机地址
        port : 8090           // 实时打包所使用的的端口号
    }

}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1wCgqiTy-1671884900130)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214171422699.png)]$

注意：凡是修改了 webpack.config.js 配置文件，或者修改了package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!

3.loader

3.1.loader概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。例如:

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文明
babel-loader 可以打包处理 webpack 无法处理的高级 js 语法

在src目录下新建css目录，并在该css目录下新建index.css文件

li{
    
    
    list-style: none;
}

在index1.js中导入

// 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
import './css/index.css'

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fymtYbo1-1671884900130)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214175829308.png)]$

实时打包的时候发现错误

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Atcku3Dk-1671884900131)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214175914445.png)]$

3.2.打包处理css文件

1.运行npm i [email protected] [email protected] -D 命令，安装处理 css 文件的 loader

npm i [email protected] [email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UcSR2kO-1671884900131)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214180335149.png)]$

2.在webpack.config.js的 module -> rules 数组中，添加 loader 规则如下:

module: {
    
     // 所有第三方文件模块的匹配规则
	rules: [ // 文件后缀名的匹配规则
			{
    
     test: /\.css$/, use: ['style-loader ,'css-loader'] }
       ]
}

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    module: {
    
    
        rules :[
            // 定义了不用模块对应的 loader
            {
    
    test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

}

其中，test 表示匹配的文件类型，use 表示对应要调用的 loader
注意:
use 数组中指定的 loader 顺序是固定的

多个 loader 的调用顺序是:从后往前调用

测试：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcSGdQdu-1671884900131)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214180808273.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gj24sVph-1671884900132)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214181204514.png)]$

3.3.打包处理less文件

在css目录下创建index.less文件

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

在index1.js引入index.less文件

// 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
import './css/index.less'

实时打包时发现错误

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-65wWSGM7-1671884900132)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214181647134.png)]$

解決方案：

1.运行npm i [email protected] [email protected] -D 命令

npm i [email protected] [email protected] -D

$1671884900132)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214182020368.png)]$

2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

 module: {
    
    
        rules :[
            // 处理 .less 文件的 loader
            {
    
    test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}
        ]   
    }

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    module: {
    
    
        rules :[
            // 定义了不用模块对应的 loader
            {
    
    test: /\.css$/,use: ['style-loader', 'css-loader'] },
            // 处理 .less 文件的 loader
            {
    
    test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}
        ]   
    }

}

测试：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjs8aAYP-1671884900133)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214182510762.png)]$

3.4.演示图片loader加载的问题

在src目录下新建images目录，并且存放一张名为 logo.png 的图片

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAVRwtp7-1671884900133)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214200507413.png)]$

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>
   <!--  <script src="./index.js"></script> -->
   <!-- <script src="../dist/bundle.js"></script> -->
   <!-- 加载和引用内存中的 bundle.js -->
   <script src="/bundle.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>

    <!-- 需求：把 src/images/logo.png 设置给 src 属性 -->
    <img src="" alt="" class="box">
</body>
</html>

index1.js

// 1.使用 es6 导入语法 ，导入jQ
import $ from 'jquery'


// 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
import './css/index.css'

// 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
import './css/index.less'



// 1.导入图片，得到图片文件
import logo from './images/1.png'
// 2.给 img 标签的 src 动态赋值 
$('.box').attr('src',logo)



// 2.定义jQ的入口函数
$(function(){
    
    
    // 3.实现奇偶行变色效果
    $('li:odd').css('background-color', '#239c2e');
    $('li:even').css('background-color', '#bbb8ce');
})

发现终端中报错

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rT3B1zA-1671884900133)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214200632473.png)]$

解决方案如下：

3.4.1.配置加载图片的loader

3.4.1.1.打包处理样式表中与url路径相关的文件

1.运行 npm i [email protected] [email protected] -D 命令

npm i [email protected] [email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uh9jsg6c-1671884900134)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214201103887.png)]$

2.在 webpack.config.js的 module -> rules 数组中，添加 loader 规则如下

module: {
    
     // 所有第三方文件模块的匹配规则
	rules: [ // 文件后缀名的匹配规则
    	  // 处理图片文件的 loader
           // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，若有多个则必须指定数组
            {
    
    test: /\.jpg|png|gif$/,use:'url-loader'}
     ]
}

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

    module: {
    
    
        rules :[
            // 定义了不用模块对应的 loader
            {
    
    test: /\.css$/,use: ['style-loader', 'css-loader'] },
            // 处理 .less 文件的 loader
            {
    
    test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},
            // 处理图片文件的 loader
            // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，若有多个则必须指定数组
            {
    
    test: /\.jpg|png|gif$/,use:'url-loader'}
        ]   
    }

}

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

limit 用来指定图片的大小，单位是字节 (byte)
只有≤limit 大小的图片，才会被转为 base64 格式的图片

重新运行 npm run dev

测试：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3TTk6ze-1671884900134)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214201625928.png)]$

3.5.打包处理js文件中的高级语法

webpack 只能打包处理一部分高级的 Javascript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 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)

3.5.1.安装babel-loader相关的包

运行如下的命令安装对应的依赖包:

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pL5K1EDS-1671884900135)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221214203011677.png)]$

在 webpack.config.js的 module -> rules 数组中，添加 loader 规则如下:

// 注意:必须使用 exclude 指定排除项，因为 node_modules 目录下的第三方包不需要被打包
// 使用babel-loader 处理高级的 js 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可，一定要排除 node_modules 目录中的 js 文件
// 因为第三方包中的 js 文件的兼容性，不需要程序关心
{
    
    test: /\.js$/,use: 'babel-loader', exclude: /node_modules/}

3.5.2.配置babel-loader

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

module.exports = {
    
    
        // 声明 babel可用的插件
        // 将来加载 webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
        plugins: [['@babel/plugin-proposal-decorators', {
    
    legacy: true}]]
}

4.发布

4.1.配置build命令

4.1.1.配置webpack的打包发布

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

"scripts": {
    
    
    "dev": "webpack serve",
    "build" : "webpack --mode production"  // 项目发布时 ，运行 build 命令 
  },

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

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

执行 npm run build

4.2.优化图片和js文件的存放路径


    // 指定生成的文件要存放到哪里
    output : {
    
    
        // 存放的目录
        path: path.join(__dirname, 'dist'), //输入文件的存放路径
        // 生成的文件名
        filename : 'js/bundle.js' // 输入文件的名称
    },

    module: {
    
    
        rules :[
            // 定义了不用模块对应的 loader

            // 处理图片文件的 loader
            // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，若有多个则必须指定数组
            // 在配置 url-loader 的时候，多个参数之间，使用 $ 符合进行分隔
            {
    
    test: /\.jpg|png|gif$/,use:'url-loader?limit=20000&outputPath=images'},

        ]   
    }

}

4.3.配置和使用clean-webpack-plugin插件自动删除dist目录

4.3.1.自动清理dist目录下的旧文件

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

教程地址:https://www.npmjs.com/package/clean-webpack-plugin

1.在根目录下执行以下命令

npm install --save-dev clean-webpack-plugin

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kx3lDV3m-1671884900135)(C:\Users\30666\AppData\Roaming\Typora\typora-user-images\image-20221215172512748.png)]$

2.在 webpack.config.js 写入以下函数

const {
    
    CleanWebpackPlugin} = require('clean-webpack-plugin');

// 使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    
    
    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',
    
    plugins: [htmlPlugin, new CleanWebpackPlugin()], // 通过 plugins 节点，使用 htmlPlugin 插件生效

}

执行 npm run build 测试

5.Source Map

5.1.概述

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

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

5.2.默认Source Map的问题

开发环境下默认生成的Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行
数不一致的问题。

5.3.解决默认Source Map的问题

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

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

    // 在开发调用阶段，建议都把 devtool 的值设置为 eval-source-map
    devtool : 'eval-source-map',

    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

}

注意：在发布项目的时候出于安全性考虑建议关闭SourceMap

5.4.只定位行不暴露源码

在生产环境下,如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为

nosources-source-map

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

    // 在开发调用阶段，建议都把 devtool 的值设置为 eval-source-map
    // 在实际发布的时候，建议把 devtool 的值设置为 nosources-source-map
    devtool : 'nosources-source-map',

    // 代表 webpack 运行的模式，可选值有 development 和 production
    mode: 'development',

}

5.5.Source Map的最佳实践

1.开发环境下:

建议把 devtbol的值设置为 eval-source-map
好处:可以精准定位到具体的错误行

2.生产环境下:

建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
好处:防止源码泄露，提高网站的安全性

6.webpack中 @ 的原理和好处

在src目录下新建msg.js文件

export default {
    
    
    msg : 'hello Vue.'
}

在src目录下新建js/test目录，并在test目录下新建info.js

import msg from '../../msg'

console.log(msg);

在index1.js中

// 导入 src/js/test/info.js
import info from './js/test/info.js'

执行 npm run dev 测试

配置 @

webpack.config.js

module.exports = {
    
    
    
    resolve : {
    
    
        alias : {
    
    
            // 告诉 webpack ，程序员写的代码中，@ 符号表示 src 这一层目录   
            '@' : path.join(__dirname,'./src/')
        }
    }

}

info.js中


// import msg from '../../msg'


// 建议使用 @ 符号表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
// @/msg.js
import msg from '@/msg.js'

console.log(msg);

index1.js


// 导入 src/js/test/info.js
import info from './js/test/info.js'
 
// 1.使用 es6 导入语法 ，导入jQ
import $ from 'jquery'


// 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
//import './css/index.css'
import '@/css/index.css'

// 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
//import './css/index.less'
import '@/css/index.less'


// 1.导入图片，得到图片文件
//import logo from './images/logo.png'
import logo from '@/images/logo.png'
// 2.给 img 标签的 src 动态赋值 
$('.box').attr('src',logo)



// 2.定义jQ的入口函数
$(function(){
    
    
    // 3.实现奇偶行变色效果
    $('li:odd').css('background-color', '#239c2e');
    $('li:even').css('background-color', '#bbb8ce');
})

导入 src/js/test/info.js
import info from ‘./js/test/info.js’




``执行 npm run dev 测试``







``配置 @ ``

webpack.config.js

```js
module.exports = {
    
    resolve : {
        alias : {
            // 告诉 webpack ，程序员写的代码中，@ 符号表示 src 这一层目录   
            '@' : path.join(__dirname,'./src/')
        }
    }

}

info.js中


// import msg from '../../msg'


// 建议使用 @ 符号表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
// @/msg.js
import msg from '@/msg.js'

console.log(msg);

index1.js


// 导入 src/js/test/info.js
import info from './js/test/info.js'
 
// 1.使用 es6 导入语法 ，导入jQ
import $ from 'jquery'


// 导入 css 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
//import './css/index.css'
import '@/css/index.css'

// 导入 less 样式(在 webpack 中一切皆模块，都可以通过 es6 导入语法进行导入和使用)
//import './css/index.less'
import '@/css/index.less'


// 1.导入图片，得到图片文件
//import logo from './images/logo.png'
import logo from '@/images/logo.png'
// 2.给 img 标签的 src 动态赋值 
$('.box').attr('src',logo)



// 2.定义jQ的入口函数
$(function(){
    
    
    // 3.实现奇偶行变色效果
    $('li:odd').css('background-color', '#239c2e');
    $('li:even').css('background-color', '#bbb8ce');
})

前端工程师必须掌握—《Webpack教程》

Webpack

文章目录

1.webpack基础

1.1.初始化隔行变色的案例

1.2.安装和配置webpack

1.2.1.安装webpack

1.2.2.配置webpack

1.2.3.了解mode可选值的应用场景

1.2.4.自定义打包的入口和出口

2.插件

2.1.安装和配置webpack-dev-server

2.1.1.安装webpack-dev-server

2.1.2.配置webpack-dev-server

2.2.安裝和配置html-webpack-plugin

2.2.1.安装html-webpack-plugin

2.2.2.配置html-webpack-plugin

2.2.3.devServer节点

3.loader

3.1.loader概述

3.2.打包处理css文件

3.3.打包处理less文件

3.4.演示图片loader加载的问题

3.4.1.配置加载图片的loader

3.4.1.1.打包处理样式表中与url路径相关的文件

3.5.打包处理js文件中的高级语法

3.5.1.安装babel-loader相关的包

3.5.2.配置babel-loader

4.发布

4.1.配置build命令

4.1.1.配置webpack的打包发布

4.2.优化图片和js文件的存放路径

4.3.配置和使用clean-webpack-plugin插件自动删除dist目录

4.3.1.自动清理dist目录下的旧文件

5.Source Map

5.1.概述

5.2.默认Source Map的问题

5.3.解决默认Source Map的问题

5.4.只定位行不暴露源码

5.5.Source Map的最佳实践

6.webpack中 @ 的原理和好处

猜你喜欢