前端工程化与Webpack
  vxNQtvtQlfbi 2023年11月19日 10 0

一、前端工程化

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
  • 压缩代码, 提高加载速度

image.png

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打包

image.png

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、打包关系图 image.png

  • 4、最终目录结构 image.png

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、打包关系图 image.png

2.4 webpack的配置

2.4.1 入口和出口

概要：

步骤

  • 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

效果：

  • 在dist目录生成bundle.js文件

2.4.2 打包流程

  • 运行yarn build/npm run build发生了什么 image.png

  • 源码一定要和入口产生直接/间接引入关系, 才会被一起打包 image.png

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>

效果：

  • 最终运行效果 image.png

  • 打包关系图 image.png

2.4.4 打包html文件

概要：

步骤：

  • 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文件

概要：

步骤：

  • 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文件

概要：

步骤：

  • 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 处理图片文件

概要：

步骤：

  • 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语法

概要：

步骤：

  • 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 插件进行更多的配置 image.png

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 导入不同模块

image.png

2.6.4 Loader加载器调用过程

image.png

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插件生效 image.png

2.9 Source Map

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

image.png

开发环境

  • 建议配置： 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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年11月19日 0

暂无评论

推荐阅读
  Wo2WjWKSubMZ   12天前   24   0   0 Vue
  Bfa4FvyAVJZ0   12天前   30   0   0 Vue
  JRkx9cNhZvS3   2天前   7   0   0 Vue
  Z0pAq4icWGd6   3天前   11   0   0 Vue
  gQdjxM18K66S   6天前   14   0   0 Vue
  yhVjKR5Ym818   6天前   16   0   0 Vue
  yAmIvObqKjzi   20小时前   11   0   0 Vue
  VlNAKfyhjjp9   20小时前   10   0   0 Vue
  yhVjKR5Ym818   11天前   17   0   0 Vue
  wPQfeMurNjxT   10天前   17   0   0 Vue
  VlNAKfyhjjp9   11天前   17   0   0 Vue
  3A8RnFxQCDqM   5天前   13   0   0 Vue
  wPQfeMurNjxT   13天前   24   0   0 Vue
  Wo2WjWKSubMZ   5天前   14   0   0 Vue
  qi45EmQmijLD   13天前   27   0   0 Vue
  lu0VMlOYSi0Q   5天前   18   0   0 Vue
  XO2fra6NaVi7   13天前   29   0   0 Vue
  yhVjKR5Ym818   2天前   8   0   0 Vue
  3A8RnFxQCDqM   10天前   14   0   0 Vue
  g7smqqGGiXGk   10天前   17   0   0 Vue
vxNQtvtQlfbi
vxNQtvtQlfbi
作者其他文章 更多
Vue2——组件详解

2023-12-05

Vue2——组件的生命周期

2023-12-05

Vue2——组件之间传值的六种方式

2023-12-05

MySQL——MRR、索引跳跃式扫描、索引覆盖、索引下推详解

2023-11-27

MySQL——高可用之组复制MGR

2023-11-27

Vue-CLI详解

2023-11-26

VUE 基础入门

2023-11-22

axios详解

2023-11-22

前端工程化与Webpack

2023-11-19

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

2023-11-14

最新推荐 更多
java实现遍历树形菜单方法——struts.xml实现

2024-04-26

什么是libtorch:

2024-04-26

java实现遍历树形菜单方法——Dao层

2024-04-26

【设计模式-2.4】创建型——抽象工厂模式

2024-04-26

使用Hutool工具包解析、生成XML文件

2024-04-26

【教你通透ELK】Elasticsearch 集群管理

2024-04-26

死信交换机&延迟队列

2024-04-26

el-table 在第一行添加合计行和操作按钮

2024-04-26

Myeclipse SVN 修改用户名和密码详解

2024-04-26

【设计模式-4.3】行为型——责任链模式

2024-04-26

【设计模式-3.2】结构型——适配器模式

2024-04-26

使用fastjson错误

2024-04-26

es安装及使用

2024-04-26

怎么给数据库某个字段建立一个前缀索引

2024-04-26

SpringBoot自动装配原理简单分析

2024-04-26

修改/etc/profile来设置环境变量，和在/usr/bin下面设置超链接有什么区别

2024-04-26

【设计模式-2.1】创建型——单例模式

2024-04-26

如何开启MySQL的慢查询日志

2024-04-26

使用String.valueOf()的坑

2024-04-26

数据库事务

2024-04-26

常用标签
数据数据数据java数据linuxlinuxpythonCentOSredis区块链技术区块链字符串MySQL资讯信息系统项目管理mysql教程JavaMySQLpython