webpack

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

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

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

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

问题：为何不学vite?
因为：很多项目还是基于Webpack构建，并为Vue，React脚手架使用做铺垫！

check.js

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

//目标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)，打开入口

webpack.config.js

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

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

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加这个

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)

步骤：

1. 下载webpack-dev-server软件包
2. 设置模式为开发模式，配置自定义命令

   module.exports={
       //...
       mode:'development'
   }
   

3. npm run dev开发服务器，热更新

   "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参数注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

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

"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)

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强制定义为字符串

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)
        })
    ]
)

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

开发环境挑错

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

解析别名alias

解析别名一配置模块如何解析，创建import引入路径的别名，来确保模块引入变得更简单
例如：原来路径如图，比较长而且相对路径不安全
解决：在webpack.config.js中配置解析别名@来代表src绝对路径

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

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

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.两种模式下打包观察效果 

<% 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疑似投毒，谨慎使用！