webpack - 技术栈

定义：本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph),然后将你项目中所谥的每一个模块组合成一个或多个bund/es,它们均为静态资源，用于展示你的内容。

静态模块：指的是编写代码过程中的，html, C55, jS,图片等固定内容的文件

打包：把静态模块内容，压缩，整合，转译等(前端工程化)

/ 把less / sass转成css代码
/把ES6+降级成ES5
/支持多种模块标准语法

问题：为何不学vite?

因为：很多项目还是基于Webpack构建，并为Vue，React脚手架使用做铺垫！

check.js

javascript 复制代码

export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 11

check.js在util文件夹里，外面加一个index.js文件，没有在package,json里面配置 type，用ECMAScript会报错

接下来npm i webpack webpack-cli --save-dev

npm run build

index.js

javascript 复制代码

//目标1：体验 webpack 打包过程
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from './utils/check.js' console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3运行自定义命令打包观察效果（npm run 自定义命令）

package.json

修改webpack打包入口出口

温馨提示，本节讲的修改入口写法都是基于commonJS的

概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)，打开入口

javascript 复制代码

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

javascript 复制代码

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

前面用 es 标准这里又用 commonjs 卡了我好久啊。在2024年这种写法会出错，24年那个导出和导入语法必须用一样的，老师这样会报错

重新打包观察，这里有报错可能是因为es6规范与commonjs规范冲突，加了"type": "module"要使用es6规范，而且es6规范里面没有直接注入变量__dirname，需要const __dirname = path.resolve();

在webpack.config.js可以在output里面加一个clean：true来生成打包后内容，清空输出目录

用户登录案例-长度判断

脚手架就是自动帮我们构建项目的工具，比如vue2的脚手架就是vue-cli

Node.js与Webpack-18.案例-用户登录-长度判断_哔哩哔哩_bilibili

自动生成html文件

HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

之前用 webpack 打包项目的时候，需要手动把 html 拷贝到出口目录中，并且手动引入打包后的 js 文件，现在是在讲怎么自动创建一个 html 并引入。

网站里面有一个导向github的详细文件jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles (github.com)，可以一个个看查找，配置这些东西直接去csdn搜索就行了，很详细的

针对多模块复用同一外部库的重复打包输出处理措施输出文件的批量命名

这是webpack.config.js

javascript 复制代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //入口
    entry: path.resolve(__dirname, 'src/login/index.js'),
    //出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './login/index.js',
        clean: true //生成打包后内容之前，清空输出目录
    },
    //插件(给Webpack提供更多功能)
    plugins: [
        new HtmlWebpackPlugin({
            template: path, resolve(__dirname, 'public/login.html'), // 模板文件
            filename: path.resolve(__dirname, 'dist/login/index.html') // '渝出文件
        })
    ]
};

终端npm run build，然后就报错的先用命令npm uni html-webpack-plugin --save-dev把插件删了然后重下，我刚才就碰到了EPERM错误，网上说是包没下完整

查看下文件夾的路徑是否正確

打包css

webpack默认是只识别js代码的

https://www.webpackjs.com/loaders/css-loader/#getting-started

加载器css-loader:解析css代码 npm i css-loader style-loader --save-dev

加载器style-loader:把解析后的css代码插入到DOM

步骤：

1 .准备css文件代码引入到src/login/index.js中（压缩转译处理等）

2 .下载css-loader和style-loader本地软件包

3 .配置webpack.config.js让Webpack拥有该加载器功能

4 .打包后观察效果

在index.css输入import './index.css'的npm run build这里有坑，前面一直是用的CommonJS的规范，这里导入要用require，不然报错

这里有缺失内容

优化提取css

不要和style-loader和mini-css-extract-plugin使用

https://webpack.docschina.org/plugins/mini-css-extract-plugin/#root

npm i mini-css-extract-plugin --save-dev

在webpack.config.js加这个

javascript 复制代码

const MiniCssExtractPlugin =require('mini-css-extract-plugin')

loder是从右向左或者从下到上依次解析顺序别写错了

因为老师的入口文件里bootstrap引入在index之前，所以是跟引入顺序有关的

压缩优化过程

CssMinimizerWebpackPlugin | webpack 中文文档 (docschina.org)

less打包

pink在移动端讲过less基础，但是我没看

和上面一样吗，下载配置，应该是less会自动转换为同名css，然后把原来的css覆盖掉了，原本的css样式被打乱了，是因为在你下载less的时候，它把css样式覆盖了，你需要重新把css样式复制粘贴回来。

图片打包

资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

vue都集成了大部分功能

案例用户登录

这里这个引入的axios应该是可以看作一个变量的，然后后面的一系列操作被装进引入的axios，最后导出

需要源代码包

搭建开发环境

问题：之前改代码，需重新打包才能运行查看，效率很低开发环境：

配置webpack-dev-server快速开发应用程序

作用：启动Web服务，自动检测代码变化，热更新到网页

开发环境 | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

步骤：

下载webpack-dev-server软件包
设置模式为开发模式，配置自定义命令
javascript 复制代码
```
module.exports={
    //...
    mode:'development'
}
```
npm run dev开发服务器，热更新
javascript 复制代码
```
"scripts":{
    "build":"webpack"
    "dev":"webpack serve --open"
},
```
Node.js与Webpack-26.Webpack搭建开发环境_哔哩哔哩_bilibili

打包模式

打包模式：告知Webpack使用相应模式的内置优化

分类：

|------|-------------|------------------|------|
| 开发模式 | development | 调试代码，实时加载，模块热替换等 | 本地开发 |
| 生产模式 | production | 压缩代码，资源优化，更轻量等 | 打包上线 |

设置：

方式1:在webpack.config.js配置文件设置mode选项

方式2:在package.json命令行设置mode参数注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

javascript 复制代码

module.exports = {
   mode: 'production'
};

javascript 复制代码

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

其实这里老师把dist目录删除掉在演示开发模式就会更清楚，理解为什么说是放在内存中。其实并没有生成dist内容

找到原因了，如果用css-minimizer-webpack-plugin插件去压缩css文件，js的压缩就会失效，可以使用terser-webpack-plugin插件去压缩js代码

模式(Mode) | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

javascript 复制代码

module: {
    rules:[
        {
            test: /\.css$/i,
            // use: ['style-loader', "css-loader"],
            use: [process.env.NODE_ENV === 'development' ? 'style-                    loader':MiniCssExtractPlugin.loader,
              "css-loader"]
        }，
        {
            test: /\.less$/i,
            use:[
                // compiles Less to CSS
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
            ],
        },
        {
            test

前端注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV

解决: 使用Webpack内置的DefinePlugin插件

DefinePlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

懂了，你们假设把这个process：'process'看成是一个对象的键值对，如果'process'这里写的是一个变量的话这个变量是undefined的

判断是production还是development，但直接写会导致字符串被认为变量，需要JSON强制定义为字符串

javascript 复制代码

const webpack = require('webpack')
module.exports = {
    // ...
    plugins:[
    // ...
        new webpack.Defi nePlugi n({
        // key是注入到打包后的前端JS代码中作为全局变量
        // value是变量对应的值(在corss-env注入在node, js中的环境变量字符串
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
)

javascript 复制代码

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '正式上线的基地址' : '测试用的基地址'

开发环境挑错

Node.js与Webpack-30.Webpack开发环境调错_哔哩哔哩_bilibili

解析别名alias

解析别名一配置模块如何解析，创建import引入路径的别名，来确保模块引入变得更简单

例如：原来路径如图，比较长而且相对路径不安全

解决：在webpack.config.js中配置解析别名@来代表src绝对路径

javascript 复制代码

const config = {
    resolve: {
    alias: {
    '@': path.resolve(---dirname, 'src')
        }
    }
}

javascript 复制代码

import { checkPhone, checkcode } from '../src/utils/check.js

javascript 复制代码

import { checkPhone, checkcode } from '@/utils/check.js

Node.js与Webpack-31.Webpack解析别名_哔哩哔哩_bilibili

cdn使用

需求：开发模式使用本地第三方库，生产模式下使用CDN加载引入

步骤:

1 .在html中引入第三方库的CDN地址并用模板语法判断

2 .配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）

3.两种模式下打包观察效果

javascript 复制代码

<% if (htmlWebpackPlugin.options.useCdn){ %>
    <link href ="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstarp.min.css"
rel="stylesheet">
<% } %>

Node.js与Webpack-32.优化-生产模式下使用CDN_哔哩哔哩_bilibili

115,116,117都不想看

bootcdn疑似投毒，谨慎使用！