前端工程化与Webpack

原创

小波同学 2023-11-18 02:14:28 博主文章分类：VUE ©著作权

文章标签 css html 相对路径 Webpack vue 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者小波同学的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、前端工程化

1.1 小白眼中的前端开发

会写HTML+ CSS +JavaScript就会前端开发
需要美化页面样式，就拽一个bootstrap过来
需要操作DOM或发起Ajax请求，再拽一个jQuery过来
要快速实现网页布局效果，就拽一个Layui过来

1.2 实际的前端开发

模块化（js 的模块化、css的模块化、资源的模块化）
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
自动化（自动化构建、自动部署、自动化测试）

1.3 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
企业中的Vue 项目和React项目，都是基于工程化的方式进行开发的。
好处：前端开发自成体系，有一套标准的开发方案和流程。

1.4 前端工程化的解决方案

1.4.1 早期的前端工程化解决方案

grunt（https:// www.gruntjs.net/）
gulp（https://www.gulpjs.com.cn/）

1.4.2 目前主流的前端工程化解决方案

webpack（https://www.webpackjs.com/）
parcel（https://lzh.parceljs.org/）

二、Webpack

2.1 什么是webpack

概念：webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

官网：https://webpack.docschina.org/ 官网文档：https://webpack.docschina.org/concepts/

2.2 webpack的作用是什么

webpack是一个静态模块打包工具，作用是分析、压缩、打包代码。
支持所有类型文件的打包
支持less/sass => css
支持ES6/7/8 => ES5
压缩代码, 提高加载速度

2.3 webpack使用步骤

2.3.1 webpack安装

webpack本质是node环境下的包，所以用npm直接安装即可。
node安装之后自动安装了npm，node相关知识请参考node初识，npm相关知识请参考npm与包。
webpack不同的版本是有差异的，不同的项目不建议使用相同版本，不建议安装全局版本，建议安装项目版本。
webpack准备工作如下：
- 先创建项目文件夹webpack-study
- 打开cmd，切换当前路径到webpack-study
- 初始化环境命令npm init -y直接生成配置文件package.json
- 安装webpack包到当前项目npm install webpack webpack-cli -D
- 在配置文件package.json节点scripts添加build配置
- 运行打包命令npm run build就会执行webpack打包

2.3.2 webpack使用

需求：打包2个js文件 -> 打包成1个js文件

步骤

1、新建src/add/add.js定义求和函数导出

export const addFn = (a, b) => a + b

2、新建src/index.js导入使用

// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));

3、运行打包命令npm run build

效果

1、在src并列处, 生成dist目录和main.js文件
2、查看main.js文件, 是打包压缩后的代码

(()=>{"use strict";console.log(7)})();

3、打包关系图
4、最终目录结构

2.3.3 webpack更新打包

需求：代码变化后再更新打包

步骤

1、新建src/tool/tool.js导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

2、src/index.js导入使用

import { addFn } from './add/add'
import { getArrSum } from './tool/tool'

console.log(addFn(5, 2));
console.log(getArrSum([5, 6, 9, 10]));

3、运行打包命令npm run build

效果

1、自动覆盖原dist中的main.js，生成的内容压缩极致

(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

2、打包关系图

2.4 webpack的配置

2.4.1 入口和出口

概要：

webpack默认的入口: src/index.js，默认的出口: dist/main.js。
修改入口和出口，需要添加webpack.config.js配置文件。
配置文档：https://webpack.docschina.org/concepts/#entry

步骤

1、创建项目文件夹webpack-config
2、webpack-study案例的文件复制一份进来
3、在项目根目录新建webpack.config.js文件 (默认配置文件名)

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    }
}

4、重命名文件src/index.js 为 src/main.js
5、运行打包命令npm run build

效果：

2.4.2 打包流程

运行yarn build/npm run build发生了什么
源码一定要和入口产生直接/间接引入关系, 才会被一起打包

2.4.3 案例-隔行变色

概要：引入jquery，实现隔行变色

步骤：

1、创建项目文件夹webpack-jquery
2、webpack-config案例的文件复制一份进来
3、安装jquery包npm install jquery
4、新建前端首页public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <!-- ul>li{我是第$个li}*10 -->
  <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>
</div>

</body>
</html>

5、修改src/main.js文件

import $ from 'jquery'

$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green')
})

6、运行打包命令npm run build
7、把public/index.html文件手动复制到dist/index.html，在dist/index.html中手动引入打包后的bundle.js

<script src="../dist/bundle.js"></script>

效果：

最终运行效果
打包关系图

2.4.4 打包html文件

概要：

webpack默认只打包js文件，其他文件是不会被打包的，需要安装插件。
html-webpack-plugin可以帮助我们将html文件打包。
配置文档：https://webpack.docschina.org/plugins/html-webpack-plugin

步骤：

1、创建项目文件夹webpack-htmlplugin
2、webpack-jquery案例的文件复制一份进来
3、安装html-webpack-plugin

npm install html-webpack-plugin -D

4、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ]
}

5、执行打包命令npm run build

效果：

和上面隔行变色手动复制一样

2.4.5 处理CSS文件

概要：

css-loader：让webpack能够识别css文件的内容
style-loader：把css插入到dom中
css-loader配置文档：https://webpack.docschina.org/loaders/css-loader/
style-loader配置文档：https://webpack.docschina.org/loaders/style-loader/

步骤：

1、创建项目文件夹webpack-css
2、webpack-htmlplugin案例的文件复制一份进来
3、安装css-loader，style-loader

npm install css-loader style-loader -D

4、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ],
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                // . 表示除换行符以外的任意字符
                // \ 转义符
                test: /\.css$/, // 匹配所有的css文件
                // loader的加载顺序是从右往左
                // 先用css-loader让webpack能够识别css文件并打包
                // 再用style-loader将样式插入到dom中
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

5、新建src/css/index.css，填上样式去除li圆点样式

li{
    list-style: none;
}

6、在main.js引入index.css，一定要引入到入口才会被webpack打包

import "./css/index.css"

7、执行打包命令npm run build

效果：

实现去除li圆点样式

2.4.6 处理Less文件

概要：

less-loader：让webpack识别处理less文件
less：翻译less代码成css代码
less-loader配置文档：https://webpack.docschina.org/loaders/less-loader/

步骤：

1、创建项目文件夹webpack-less
2、webpack-css案例的文件复制一份进来
3、安装less-loader，less

npm install less less-loader -D

4、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ],
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                // . 表示除换行符以外的任意字符
                // \ 转义符
                test: /\.css$/, // 匹配所有的css文件
                // loader的加载顺序是从右往左
                // 先用css-loader让webpack能够识别css文件并打包
                // 再用style-loader将样式插入到dom中
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, // 匹配.less结尾文件
                // 使用less-loader让webpack能够识别less文件 
                // 内置还会用less模块, 翻译less代码成css代码
                // 然后再打包CSS文件，并将样式插入到dom中
                use: ["style-loader", "css-loader", 'less-loader']
            }
        ]
    }
}

5、新建src/less/index.less，设置li字体大小24px

@size:24px;

ul, li{
    font-size: @size
}

6、引入到main.js中

import "./less/index.less"

7、执行打包命令npm run build

效果：字体设置成需求大小

2.4.7 处理图片文件

概要：

配置webpack, 打包图片文件
资源模块文档：https://webpack.docschina.org/guides/asset-modules/

步骤：

1、创建项目文件夹webpack-pic
2、webpack-less案例的文件复制一份进来
3、src文件夹下创建assets文件夹，放入两张图片
4、在css/less/index.less设置body背景图片

body{
    background: url(../assets/logo_small.png) no-repeat center;
}

5、在src/main.js把图片添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

6、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ],
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                // . 表示除换行符以外的任意字符
                // \ 转义符
                test: /\.css$/, // 匹配所有的css文件
                // loader的加载顺序是从右往左
                // 先用css-loader让webpack能够识别css文件并打包
                // 再用style-loader将样式插入到dom中
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, // 匹配.less结尾文件
                // 使用less-loader让webpack能够识别less文件 
                // 内置还会用less模块, 翻译less代码成css代码
                // 然后再打包CSS文件，并将样式插入到dom中
                use: ["style-loader", "css-loader", 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
                // asset
                // 大于 8KB 不转 base64 直接复制
                // 小于 8KB 转成 base64 插入到 js 中
                type: 'asset',
                // generator 就是定义打包输出的规则
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'imgs/[name].[hash:4][ext]'
                }
            }
        ]
    }
}

7、执行打包命令npm run build

效果

图片正确显示
类型设置type
- 大于 8KB 不转 base64 直接复制
- 小于 8KB 转成 base64 插入到 js 中
转base64
- 优点：减少网络请求
- 缺点：增加30%的体积

2.4.8 处理字体文件

概要：配置webpack，打包字体文件步骤：

1、创建项目文件夹webpack-font
2、webpack-pic案例的文件复制一份进来
3、assets文件夹下创建fonts文件夹，放入字体文件
4、在main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

5、在public/index.html使用字体图标样式

<i class="iconfont icon-weixin"></i>

6、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ],
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                // . 表示除换行符以外的任意字符
                // \ 转义符
                test: /\.css$/, // 匹配所有的css文件
                // loader的加载顺序是从右往左
                // 先用css-loader让webpack能够识别css文件并打包
                // 再用style-loader将样式插入到dom中
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, // 匹配.less结尾文件
                // 使用less-loader让webpack能够识别less文件 
                // 内置还会用less模块, 翻译less代码成css代码
                // 然后再打包CSS文件，并将样式插入到dom中
                use: ["style-loader", "css-loader", 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
                // asset
                // 大于 8KB 不转 base64 直接复制
                // 小于 8KB 转成 base64 插入到 js 中
                type: 'asset',
                // generator 就是定义打包输出的规则
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'imgs/[name].[hash:4][ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i, // 匹配字体文件
                // asset/resource:不做base64转换, 无论多大多小都直接复制到出口
                type: 'asset/resource',
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            }
        ]
    }
}

7、执行打包命令npm run build

效果：

正确显示字体
asset/resource:不做base64转换, 无论多大多小都直接复制到出口

2.4.9 处理高版本js语法

概要：

让webpack用babel编译器处理高版本js语法降级成低版本js
babel官网：https://www.babeljs.cn/
babel-loader文档：https://webpack.docschina.org/loaders/babel-loader/

步骤：

1、创建项目文件夹webpack-es6
2、webpack-font案例的文件复制一份进来
3、在src/main.js编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

4、安装包babel-loader，@babel/core，@babel/preset-env

npm install babel-loader @babel/core @babel/preset-env -D

5、修改webpack.config.js配置文件

const path = require("path")

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/main.js", // 入口：可以是相对路径
    output: {
        path: path.join(__dirname, "dist"), // 出口：必须是绝对路径
        filename: "bundle.js" // 出口"文件"名
    },
    plugins: [
        // html 插件
        new HtmlWebpackPlugin({
            // 指定要复制的HTML文件位置
            // 可以使用相对路径
            // 作用: 每次打包时自动从该目录下复制HTML到出口, 同时自动引入js文件, 并添加defer属性
            // defer: 等页面资源加载完成后加载js文件
            template: './public/index.html'
        })
    ],
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
            {
                // . 表示除换行符以外的任意字符
                // \ 转义符
                test: /\.css$/, // 匹配所有的css文件
                // loader的加载顺序是从右往左
                // 先用css-loader让webpack能够识别css文件并打包
                // 再用style-loader将样式插入到dom中
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/, // 匹配.less结尾文件
                // 使用less-loader让webpack能够识别less文件 
                // 内置还会用less模块, 翻译less代码成css代码
                // 然后再打包CSS文件，并将样式插入到dom中
                use: ["style-loader", "css-loader", 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
                // asset
                // 大于 8KB 不转 base64 直接复制
                // 小于 8KB 转成 base64 插入到 js 中
                type: 'asset',
                // generator 就是定义打包输出的规则
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'imgs/[name].[hash:4][ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i, // 匹配字体文件
                // asset/resource:不做base64转换, 无论多大多小都直接复制到出口
                type: 'asset/resource',
                generator: {
                    // [] 的内容当做内置的变量
                    // [name] 表示原先的文件名
                    // [hash:6] 表示使用哈希字符串, 长度6
                    // [ext] 表示后缀名 带 .
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            },
            {
                // 强烈不建议大家手写, 容易出错
                test: /\.m?js$/, // 匹配js结尾文件
                exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
                use: {
                    loader: 'babel-loader', // 使用加载器处理
                    options: {
                        presets: ['@babel/preset-env'] // 预设转码规则(用bable开发环境)
                    }
                }
            }
        ]
    }
}

6、执行打包命令npm run build

效果：打包后观察dist/bundle.js文件, 自动变成普通函数

2.5 webpack动态部署

需要两个插件

webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 每当修改了源代码，webpack 会自动进行项目的打包和构建
html-webpack-plugin
- webpack 中的 HTML 插件（类似于一个模板引擎插件）
- 可以通过此插件自定制 index.html 页面的内容

2.5.1 webpack-dev-server与html-webpack-plugin的安装

npm install webpack-dev-server -D
npm install html-webpack-plugin -D

2.5.2 package.json

修改 npm run 运行脚本为 webpack serve

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "rdev": "webpack server"
  }

2.5.3 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({
    // 原文件的存放路径
    template: './src/index.html',
    // 生成的文件的存放路径
    filename: './index.html'
});

// 使用Node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式，可选值有两个development、production
    // mode用来指定构建模式
    mode: 'development',
    // 通过plugins属性，使HtmlWebpackPlugin插件生效
    plugins: [htmlPlugin]
}

1、不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
- 严格遵守开发者在 webpack.config.js 中指定配置
- 根据 output 节点指定路径进行存放
2、配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
- 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
- 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
3、webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且虚拟、不可见。
- 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
4、html-webpack-plugin 插件将/src/index.html，复制了一份到项目根目录下，也被放到了内存中

2.5.4 devServer节点

webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

2.6 Loader加载器

webpack默认打包JS模块，非JS模块需要借用Loader加载器来打包

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
url-loader 可以打包处理jpg、png、gif等图片相关的文件

2.6.1 安装不同的加载器

npm i style-loader css-loader less-loader url-loader file-loader babel-loader @babel/core @babel/plugin-proposal-decorators -D

2.6.2 定义不同模块对应的加载器

webpack.config.js在module -> rules 数组中添加加载器

// 使用Node.js 中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式，可选值有两个development、production
    // mode用来指定构建模式
    mode: 'development',
    // entry:"指定文件入口位置"
    entry: path.join(__dirname, './src/index1.js'),
    // output: 指定生成的文件存放位置
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    // 通过plugins属性，使HtmlWebpackPlugin插件生效
    plugins: [htmlPlugin,webpackConfig],
    devServer: {
        open: true, // 初次打包完成后，自动打开浏览器
        host: '127.0.0.1',
        port: 8080
    },
    module: {
        rules: [
            //定义不同模块对应的加载器
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // 超过limit阈值的为大文件。不会转成base64，单位是字节
            // 图片输出的文件存放路径，文件大于阈值会输出到磁盘
            {test: /\.jpg|png|gif$/, use: 'url-loader?limit=10&outputPath=images'},
            //使用babel-loader处理高级的JS语法
            //在配置babel-loader 的时候，程序员只需要把自己的代码进行转换即可;一定要排除node_ modules 目录中的JS文件
            //因为第三方包中的JS兼容性，不需要程序员关心
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}

test 表示匹配的文件类型， use 表示对应要调用的 loader
多个 loader 的调用顺序是：从后往前调用，后面加载器的结果返回给前面的加载器，直至返回给webpack，webback把加载的所有模块拼到一个JS文件

2.6.3 导入不同模块

2.6.4 Loader加载器调用过程

2.7 打包发布

使用 webpack 对项目进行打包发布。
在 package.json 文件的 scripts 节点下，新增 build 命令如下：

  "scripts": {
    "rdev": "webpack server",
    "build": "webpack --mode production"
  }

开发环境下，运行 npm run rdev，打包生成的文件存放于内存中，无法获取到最终打包生成的文件，且打包生成的文件不会进行代码压缩和性能优化。

生成环境下，运行 npm run build，–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化，生成的文件存放于磁盘，且通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

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

2.8.1 安装clean-webpack-plugin插件：https://www.npmjs.com/package/clean-webpack-plugin

2.8.2 导入clean-webpack-plugin插件

webpack.config.js文件导入插件，使插件生效

const HtmlWebpackPlugin = require('html-webpack-plugin')
//结构赋值
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')

通过 module.exports -> plugins属性指定 webpackConfig插件生效

2.9 Source Map

有了Source Map，调试的时候，可以直接显示原始代码，而不是压缩转换后的代码
推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致

开发环境

建议配置： devtool: ‘eval-source-map’
可以直接在控制台提示源文件错误行的位置，并定位到具体的源代码

生成环境

建议配置：devtool: ‘nosources-source-map’
只定位报错的具体行数在源文件中的位置，且不暴露源码。
如果想在定位报错行数的同时，展示具体报错的源码，可以配置：devtool: ‘source-map’, 但不安全，不建议使用

2.10 别名的使用

在webpack项目中，建议使用 @ 表示 src 源代码目录，从外往里查找；不要使用 …/ 从里往外查找。使用之前需要在webpack.config.js定义别名

module.exports = {
    resolve: {
        alias: {'@': path.join(__dirname, './src/')}
    }
}

例如项目根目录src文件夹下有一个文件msg.js。可以这样导入该模块：import msg from ‘@/msg.js’

参考： https://blog.csdn.net/weixin_37536020/article/details/128574214

https://blog.csdn.net/liyou123456789/article/details/131564624

https://blog.csdn.net/weixin_43849430/article/details/123968355

上一篇：数据结构——跳表(SkipList)设计与实现(Java)

下一篇：Vue2——基础入门

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯