Vue2之webpack的完整知识及使用M（webpack相关知识最全完整版）

编程语言 2023-08-22 22:43:31 阅读次数: 0

Vue之WebPack相关知识

一、webpack的基本使用

1、概念

webpack是前端项目工程化的具体解决方案。

2、主要功能

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。（也就是程序员可以写更高级地代码，而webpack则会将高级代码自动转换成低级代码）

3、优点

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue, React 等前端项目，基本上都是基于webpack进行工程化开发的。

二、webpack应用

1、实现隔行变色功能

1.1 新建项目空白目录

（1）在当前目录下，打开终端，并运行npm init -y命令，初始化包管理配置文件package.json

npm init -y

运行成功后，该文件夹下会出现package.json这个文件
image.png

1.2 新建src源代码目录

（1）在建好src文件夹后，如下图
image.png
（2）点击进入src文件夹，然后创建index.html和index.js两个脚本文件
如下图
image.png

1.3 初始化页面结构

（1）用VScode打开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>
</head>
<body>
    
</body>
</html>

（2）在body标签下输入

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

（3）再按回车，body标签内便会自动生成相关代码
完整结构代码如下

<!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>
</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>

1.4 安装jQuery

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

npm i jquery -S

安装成功后，如下图
image.png

1.5 通过ES6模块化的方式导入jQuery

（1）在index.js这个文件里导入命令

// 1.使用ES6导入语法，导入jQuery
import $ from 'jquery'

注意：直接在html页面里也是用不了的，得用webpack打包后才能用。
（2）实现列表隔行变色效果

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

1.6 安装webpack模块

（1）在终端运行如下命令

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

或者

npm install [email protected] [email protected] --save-dev

注意：-D是–save-dev的缩写
（2）如果安装报错
解决方法

首先删除该项目中下载好的node_modules
再删除该项目中package-lock.json文件
以管理员权限执行下面的命令：
再清除npm缓存 npm cache clean --force
最后npm install
再重新执行npm install [email protected] [email protected] -D
应该就没问题了

1.7 在项目中配置webpack

（1）在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置。
同时代表webpack运行的模式，可选值有两个development 和 production。
开发时用development,打包时间快，但压缩包大
生产时用production，打包时间慢，但压缩包小

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    
    
    mode: 'development'
}

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

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

注意：script节点下的脚本，可以通过npm run执行，例如npm run dev

1.8 运行命令，启动webpack进行项目的打包构建

（1）执行命令

npm run dev

得出结果，显示如下便执行成功
image.png

1.9 自定义打包的入口和出口

（1）webpack中的默认约定
在webpack 4.x和5.x的版本中，有如下的默认约定
默认的打包入口文件为src目录下的index.js文件
默认的输出文件路径为dist目录下的main.js
注意：可以在webpack.config.js中修改打包的默认约定
（2）可以指定打包的出入口
在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。

const path = require('path')

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 自定义打包入口文件的路径
    entry: path.join(__dirname,'./src/index1.js'),
    // 自定义生成的文件的存放路径
    output: {
    
    
        // 存放到目录 
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: 'mian1.js'
    }
}

1.10 代码里导入打包好的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="../dist/main1.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>

结果如下
image.png

2、webpack中的插件

2.1 webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。

2.2 webpack-dev-server插件

（1）介绍
每当修改了源代码，webpack会自动进行项目的打包和构建。
（2）命令

npm install [email protected] -D

注意：安装时要把VSCode或其他打开该文件夹的软件关掉。
（3）配置webpack-dev-server
修改package.json中的scripts下的dev命令

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

（4）重新进行项目的打包

npm run dev

（5）在浏览器中访问http://localhost:8080地址，查看自动打包效果。
（6）如果报错，解决方案如下
重新安装 webpack-cli 依赖模块

npm install webpack-cli --save-dev

重新运行

npm run dev

注意：webpack-dev-server会启动一个实时打包的http服务器，会将打包好的文件放到内存里，所以通过本地打开页面的话，修改相关东西还是不会改变，只有通过http://localhost:8080/src才能看到实时的变化，而且引入的代码也得修改成
image.png

2.3 html-webpack-plugin插件

（1）介绍
webpack中的HTML插件（类似于一个模板引擎插件）
（2）命令

npm install [email protected] -D

（3）相关使用

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

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

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 3.通过plugins节点，使htmlPlugin插件生效
    // 插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin],
}

(4）运行命令

npm run dev

即可通过http://localhost:8080访问时，便直接就有页面出现。
（5）注意
使用html-webpack-plugin插件时，通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。
HTML插件在生成的index.html页面，自动注入了打包的index.js文件。
所以代码里可以不用引入，会自动渲染。

2.4 devServer节点

（1）介绍
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置
（2）相关代码

devServer: {
    
    
        // 首次打包成功后，自动打开浏览器
        open: true,
        // 在http协议中，如果端口号是80，则可以被省略
        port: 92,
        // 指定运行的主机地址
        host: '127.0.0.1'
}

（3）在webpack.config.js配置文件中的位置

module.exports = {
    
    
    mode: 'development',
    devServer: {
    
    
        // 首次打包成功后，自动打开浏览器
        open: true,
        // 在http协议中，如果端口号是80，则可以被省略
        port: 92,
        // 指定运行的主机地址
        host: '127.0.0.1'
    }
}

结果
image.png

3、webpack中的加载器（loader）

3.1 loader概述

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

3.2 作用

loader加载器的作用是协助webpack打包处理特定的文件模块
css-loader可以打包处理 .css相关的文件
less-loader可以打包处理 .less相关的文件
babel-loader可以打包处理 webpack无法处理的高级JS语法

3.3 打包处理css文件

（1）安装处理css文件的loader命令

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

（2）在webpack.config.js的module中的rules数组中，添加loader规则。

module: {
    
    
   rules: [
            // 定义了不同模块对应的loader
            // 文件名后缀名的匹配规则
            {
    
    test: /\.css$/, use:['style-loader','css-loader']}
   ]
}

其中，test表示匹配的文件类型，use表示对应要调用的loader
（3）在webpack.config.js配置文件中的位置

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 定义了不同模块对应的loader
            // 文件名后缀名的匹配规则
            {
    
    test: /\.css$/, use:['style-loader','css-loader']}
        ]
    }
}

（4）在index.js中的代码

import './css/index.css'

（5）对应css文件的代码

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

结果
image.png

3.4 处理css的流程

（1）当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器。
（2）webpack把Index.css这个文件，先转交给css-loader进行处理
（3）当css-loader处理完毕之后，会把处理的结果，转交給style-loader
（4）当style-loader处理完毕之后，没有下一个loader了，便把处理的结果，转交给了webpack
（5）webpack把style-loader处理的结果，合并到/dist/index.js中，最终生成打包好的文件。

3.5 打包处理less文件

（1）安装处理less文件的命令

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

（2）在webpack.config.js的module中的rules数组中，添加loader规则。

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

（3）在webpack.config.js配置文件中的位置

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

（4）在index.js中的代码

import './css/index.less'

（5）对应less文件的代码

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

结果
image.png

3.6 打包处理url路径相关的文件

（1）安装处理url路径相关文件的命令

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

（2）在webpack.config.js的module中的rules数组中，添加loader规则。

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

注意：
limit用来指定图片的大小，单位是字节（byte）
只有小于等于limit大小的图片，才会被转为base64格式的图片。
小图片建议转换成base64，方便快速加载，而不用多次发请求。
（3）在webpack.config.js配置文件中的位置

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

（4）在index.js中的代码

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

（5）对应代码

<img src="" alt="" class="box">

结果
image.png

3.7 webpack处理样式的过程

导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
如果某个模块中，使用from接收到的成员为undefined，则不需要接收

3.8 打包处理js中的高级语法

（1）介绍
webpack只能打包处理一部分高级的JavaScript语法，对于一些webpack无法处理的高级js语法，则需要借助babel-loader进行打包处理。
（2）命令

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

（3）在webpack.config.js的module中的rules数组中，添加loader规则。

module: {
    
    
        rules: [
            // 使用babel-loader处理高级js语法
            // 在配置babel-loader的时候，只需要把自己的代码进行转换即可，要排除node_modules目录中的JS文件
            // 因为第三方包中的JS兼容性，不需要关心
            {
    
    
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },
        ]
    }

（4）在webpack.config.js配置文件中的位置

module.exports = {
    
    
    mode: 'development',
    module: {
    
    
        rules: [
            // 使用babel-loader处理高级js语法
            // 在配置babel-loader的时候，只需要把自己的代码进行转换即可，要排除node_modules目录中的JS文件
            // 因为第三方包中的JS兼容性，不需要关心
            {
    
    
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },
        ]
    }
}

（5）在项目根目录下，创建名为babel.config,js的配置文件

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

（6）在index.js文件内写测试代码

// 定义装饰器函数
function info(target) {
    
    
    target.info = 'Person info'
}

// 定义一个普通的类
@info
class Person{
    
    }

console.log(Person.info)

结果
image.png

4、webpack的打包发布

4.1 配置build命令

（1）在package.json文件中的scripts节点下，build命令如下

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

–mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过–mode指定的参数项，会覆盖webpack.config.js中的mode选项。–mode的优先级比mode选项高。

4.2 优化图片和js文件的存放位置

（1）修改webpack.config.js文件里的js文件生成路径

const path = require('path')

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // entry: '指定要处理哪个文件'
    entry: path.join(__dirname, './src/index.js'),
    // 指定生成的文件要存放到哪里
    output: {
    
    
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件路径
        filename: 'js/index.js'
    },
}

生成成功后的结果
image.png
（2）修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径。
明确指定把打包生成的图片文件，存储到dist目录下的image文件夹

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    module: {
    
    
        rules: [
            // 处理 图片的loader
            {
    
    
                test: /\.jpg|png|gif$/,
                // 配置url-loader的时候，多个参数之间，使用&符号进行分隔
                use: 'url-loader?limit=470&outputPath=images',
            },
        ]
    }
}

结果
image.png

4.3 配置和使用clean-webpack-plugin插件

（1）安装命令

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

（2）在webpack.config.js中增加代码

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

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 通过plugins节点，使htmlPlugin插件生效
    // 插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin()],
}

5、Source Map

5.1 介绍

Source Map是一个信息文件，里面存储着位置信息。也就是说Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。如果出错，除错工具将直接显示原始代码，而不是转换后的代码，能够极大方便后期的调试。

5.2 开发环境下，精准定位到具体的错误行（建议）

在webpack.config.js中添加如下代码

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'eval-source-map',
}

5.3 生产环境下，出现错误时，即定位行数，也暴露源码（不建议）

在webpack.config.js中添加如下代码

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'source-map',
}

5.4 生产环境下，出现错误时，只定位行数，不暴露源码（建议）

在webpack.config.js中添加如下代码

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    // 此选项生成的Source Map能够保证“运行时报错的行数” 与 “源代码的行数”保持一致
    devtool: 'nosources-source-map',
}

方便用户自己调试，提高网站安全性

5.5 注意

发布项目时，建议关闭devtool选项，则最终生成的文件中不包含Source Map。这样可以防止原始代码通过Source Map的形式暴露给其他人。

6、拓展

6.1 用@代替src目录

（1）代码如下

module.exports = {
    
    
    // 代表webpack运行的模式，可选值有两个development 和 production
    mode: 'development',
    resolve: {
    
    
        alias: {
    
    
            // 用@符号表示src这一层目录
            '@': path.join(__dirname, './src/')
        }
    }
}

（2）相关应用
例子如下：

import '@/css/index.css'

猜你喜欢

转载自blog.csdn.net/qq_46106857/article/details/128937400
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022