一、前端工程化

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.jssrc/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-loaderstyle-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