webpack / Vite

---

一、webpack的使用

打包完再运行代码
使用步骤：

1. 初始化项目： npm init -y
2. 安装依赖：npm i webpack webpack-cli -D
3. 执行webpack：npx webpack
npx webpack --watch
   在入口文件引入打包后的文件

二、webpack的配置文件

一般配置文件是隐藏的且不需要我们配置，可以自行配置相关属性
创建webpack的配置文件：webpack.config.js
配置文件是给node.js 看的，要遵循node的模块化规范。

打包好的文件给别人不需要提交 node_modules文件

配置好的模板：

package.json:

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack serve --mode development "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "html-withimg-loader": "^0.1.16",
    "mini-css-extract-plugin": "^2.7.6",
    "node-sass": "^9.0.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "jquery": "^3.7.1"
  }
}

webpack.config.js:

// 遵循 common.js 规范
// 引入安装的css插件
const miniCssExtractPlugin =require("mini-css-extract-plugin");
// 引入css压缩插件
const optimizeCssAssetsWebpack = require("optimize-css-assets-webpack-plugin")
// 引入js压缩插件
const uglifyjsWebpack = require("uglifyjs-webpack-plugin")
// 引入html打包插件
const htmlWebpack = require("html-webpack-plugin")
// 打包前清除dist目录 es6语法解构对象
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

module.exports = {
// 1.配置入口文件
    entry: {
        main:"./src/js/index.js",
    },

// 2.输出：把打包的文件放在哪里
    output: {
        // path: path.resolve(__dirname,"./hello"), // 指定打包的目录，必须要绝对路径
        filename: "js/[name].js", // 打包后的文件名 默认 main.js
        // 设置图片存放位置和名称(只能打包css图片)
        assetModuleFilename: "images/[name][ext]", // 把图片保存至images文件下，保留原来的名字+随机生成8位hash值，并保留图片的格式名
    },

// 3.设置打包的模式
    mode: "production", // production生产模式  development开发模式

// 7. 配置文件压缩属性
    optimization: {
        minimizer:[
            new optimizeCssAssetsWebpack(), // 压缩css
            new uglifyjsWebpack({ // 压缩js
                cache:false, // 是否开启缓存
                parallel: true, // 同时打包多个js文件
                sourceMap: true, // 打包后的js生成一个map映射文件，方便在源码上调试
            }),
        ],
    },

// 4. 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // css和sass的loader
                test: /\.css$|\.scss/, 
                use: [
                    {
                        loader:miniCssExtractPlugin.loader, // 用插件的loader  
                    },  
                    "css-loader",
                    "sass-loader",
                ],
            },
            { // 配置js打包图片的loader
                test:/\.(jpg|png|jpeg|gif|svg)$/,
                type:"asset/resource", // 使用webpack的默认打包器
                generator:{ // 设置打包方式
                    filename:"images/[name][ext]",
                },
            },
            { // 配置html打包图片的loader
                test:/\.(html|.htm)$/,
                loader:"html-withimg-loader",
            },
        ],
    },

// 5. 监听打包文件改动，自动打包（不用每次改动手动打包）
    // watch:true,

// 6. webpack配置插件
    plugins:[
        // 打包前清除dist目录
        new CleanWebpackPlugin(),
        new miniCssExtractPlugin({ // 直接new对象
            filename:"css/[name].css", // 配置输出的css文件名称，[name]保留原来文件的css名
        }),
        new htmlWebpack({
            template:"./src/index.html", // 打包的html文件
            filename:"index.html", // 打包后的文件名
            inject: "body", // js脚本注入的位置：head头部，body后面
            chunks:["main"], // 引入打包的js文件，需要在entry配置文件名
            minify:{ // 配置html文件压缩
                collapseWhitespace:true, // 去掉多余的空格和回车符
                removeComments:true, // 移出注释
            },
        }),
        new htmlWebpack({
            template:"./src/list.html", // 打包的html文件
            filename:"list.html", // 打包后的文件名
            inject: "body", // js脚本注入的位置：head头部，body后面
            chunks:["main"], // 引入打包的js文件，需要在entry配置文件名
            minify:{ // 配置html文件压缩
                collapseWhitespace:true, // 去掉多余的空格和回车符
                removeComments:true, // 移出注释
            },
        }),
        new htmlWebpack({
            template:"./src/detail.html", // 打包的html文件
            filename:"detail.html", // 打包后的文件名
            inject: "body", // js脚本注入的位置：head头部，body后面
            chunks:["main"], // 引入打包的js文件，需要在entry配置文件名
            minify:{ // 配置html文件压缩
                collapseWhitespace:true, // 去掉多余的空格和回车符
                removeComments:true, // 移出注释
            },
        }),
    ],

// 配置开发服务器
    devServer: {
        port: 8080, //配置端口号
        open: true, // 浏览器自动打开打包后的默认打包文件
    },
}

1. 简化命令

打包webpack命令：npm run build
打开开发服务器命令：npm run dev

2. 基本配置

遵循 common.js 规范

1. 创建配置文件: webpack.config.js

// 遵循 common.js 规范
const path = require("path")// 导入路径模块
const miniCssExtractPlugin =require("mini-css-extract-plugin");// 引入安装的css插件

module.exports = {
// 1.配置入口文件
    entry: "./src/index.js", // 用来指定打包时的主文件，默认是 ./src/index.js
    entry:["./src/a.js","./src/b.js"], // 把多个文件打包成一个文件 
    entry:{ // 分别打包两个文件
        hello: "./src/a.js", // 把a.js打包成名为 hello的文件
        b:"./src/b.js"
    },

// 2.输出：把打包的文件放在哪里
    output: {
        path: path.resolve(__dirname,"./hello"), // 指定打包的目录，必须要绝对路径
        filename: "main.js", // 打包后的文件名 默认 main.js
        filename: "[name].js", // 如果有多个文件需要打包 --[变量名]
        clear: true, // 自动清理dist目录后再打包（就不会存留之前的js文件）
    },

// 3.设置打包的模式
    mode: "production", // production生产模式  development开发模式

// 4. 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // css的loader
                test: /\.css$/, 
                use: ["style-loader","css-loader"] // css文件使用的loader 顺序不可倒
            },
        ]
    },

// 5. 监听打包文件改动，自动打包（不用每次改动手动打包）
    watch:true,
    
// 6. webpack配置插件
    plugins:[
        new miniCssExtractPlugin({ // 直接new对象
            filename:"[name].css", // 配置输出的css文件名称，[name]保留原来文件的css名
        }) 
    ],
    
// 7. 配置文件压缩属性
    optimization: {
        minimizer:[
            new optimizeCssAssetsWebpack()
        ],
    },
}

3. loader 加载器

webpack默认只能处理js文件，如果要处理其他类型文件，要引入其不同的loader。

1. 打包css样式文件

会把css等文件和js文件打包成一个文件里面。
使用css-loader 可以处理js中的样式
使用步骤：

1. 安装：npm i css-loader style-loader -D
2. 配置

module.exports = {
    mode: "production", // 设置打包的模式：production生产模式  development开发模式
    
 // 配置模块，添加各种文件的loader
    module: { // 添加各种loader的规则
    // 配置css的loader
        rules: [
            {
                test: /\.css$/i, // 匹配为 .css结尾的文件
                use: ["style-loader","css-loader"] // 解析相应的文件代码
            }
        ]
    }
}

3. 把css看作一个模块直接在入口js文件导入:
   import "./style/main.css"

2. 打包sass样式文件

1. 安装sass: cnpm i sass-loader node-sass -D
2. 配置：

module.exports = {

// 4. 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // css和sass的loader
                test: /\.css$|\.scss/, 
                use: [
                    {
                        loader:miniCssExtractPlugin.loader, // 用插件的loader  
                    },  
                    "css-loader",
                    "sass-loader",
                ],
            },
        ]
    },
}

3. 直接在入口js文件导入sass文件
   import "./style/common.scss"

4. 插件（plugin）

插件为webpack来扩展功能。由于webpack打包是把所有文件打包在一起，需要安装插件把不同的文件分别打包不同的目录下。

1. 单独打包 CSS文件

在生产环境，css代码必须抽离和压缩，不然打包会把css文件打包到js文件中，体积会比较大，这样性能不好。
把css单独打包到一个文件，需要安装插件。多个css文件也会打包到一个css文件中。

1. 安装插件：npm i mini-css-extract-plugin -D
2. 引入安装的插件：const miniCssExtractPlugin =require("mini-css-extract-plugin");
3. 配置插件：

// 引入安装的插件
const miniCssExtractPlugin =require("mini-css-extract-plugin");

module.exports = {
// 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // css的loader
                test: /\.css$/, 
                use: [
                    {
                        loader:miniCssExtractPlugin.loader, // 用插件的loader
                    },
                    "css-loader",
                ],
            },
        ]
    },

//  webpack配置插件
    plugins:[
        new miniCssExtractPlugin({ // 直接new对象
            filename:"css/[name].css", // 配置输出的css文件名称，[name]保留原来文件的css名
        }) 
    ],
}

1. 打包后的目录：
   

2. 压缩css和js文件

步骤：

1. 安装css压缩插件：cnpm i optimize-css-assets-webpack-plugin -D
   安装js压缩插件：cnpm i uglifyjs-webpack-plugin -D
2. 引入安装的css压缩插件：const optimizeCssAssetsWebpack = require("optimize-css-assets-webpack-plugin")
   引入安装的js压缩插件：const uglifyjsWebpack = require("uglifyjs-webpack-plugin")
3. 配置插件：

// 引入css压缩插件
const optimizeCssAssetsWebpack = require("optimize-css-assets-webpack-plugin")
// 引入js压缩插件
const uglifyjsWebpack = require("uglifyjs-webpack-plugin")

module.exports = {
// 7. 配置文件压缩属性
    optimization: {
        minimizer:[
            new optimizeCssAssetsWebpack(), // 压缩css
            new uglifyjsWebpack({ // 压缩js
                cache:false, // 是否开启缓存
                parallel: true, // 同时打包多个js文件
                sourceMap: true, // 打包后的js生成一个map映射文件，方便在源码上调试
            }),
        ],
    },
}

3. 打包 img图片文件

1. 打包css/sass文件的图片

css/sass文件里的图片可以直接打包。
webpack 打包图片，css/sass图片是可以自动打包的

module.exports = {
// 2.输出：把打包的文件放在哪里
    output: {
        // 设置图片存放位置和名称
        assetModuleFilename: "images/[name].[hash:8][ext]", 
// 把图片保存至images文件下，保留原来的名字+随机生成8位hash值，并保留图片的格式名
    },
}

2. 打包js文件的图片

js内的图片不能直接打包，需要用模块化。
配置文件：

module.exports = {
// 2.输出：把打包的文件放在哪里
    output: {
        // 设置图片存放位置和名称(只能打包css图片)
        assetModuleFilename: "images/[name].[hash:8][ext]", // 把图片保存至images文件下，保留原来的名字+随机生成8位hash值，并保留图片的格式名
    },

// 4. 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // 配置js打包图片的loader
                test:/\.(jpg|png|jpeg|gif|svg)$/,
                type:"asset/resource", // 使用webpack的默认打包器
                generator:{ // 设置打包方式
                    filename:"images/[name].[hash:8][ext]",
                },
            },
        ],
    },
}

js的图片文件：

// js内的图片
let imgsrc = require("./assets/nike3.jpg") // 把图片当中模块引入，webpack就能识别

let img = new Image(); // 创建图片对象
img.src = imgsrc //webpack打包图片，图片较小会生成base64格式（用数据表示图片）
document.body.appendChild(img)

3. 打包html内的图片

1. 安装：cnpm i html-withimg-loader -D
2. 配置：

module.exports = {
// 4. 配置模块，添加各种文件的loader
    module: {
        rules:[ // 添加各种loader的规则
            { // 配置html打包图片的loader
                test:/\.(html|.htm)$/,
                loader:"html-withimg-loader",
            },
        ],
    },
}

3. 打包：npm run build
4. 开发服务器运行：npm run dev

4. 自动生成 HTML文件

html-webpack-plugin:这个插件在打包代码后，自动在打包目录生成 html文件
步骤：

1. 安装：cnpm i html-webpack-plugin -D
2. 引入html插件: const htmlWebpack = require("html-webpack-plugin")
3. 配置：

const HTMLPlugin = require("html-webpack-plugin")

module.exports = {
// 1.配置入口文件
    entry: {
        main:"./src/js/index.js",
        home:"./src/js/home.js"
    },
    
// 6. webpack配置插件    
    plugins: [// 自动生成html文件
        new htmlWebpack({
            title:"hello webpack", // 定义title
            template:"./src/index.html", // 打包的html文件
            filename:"index.html", // 打包后的文件名
            inject: "body", // js脚本注入的位置：head头部，body后面
            chunks:["main"], // 引入打包的js文件，需要在entry配置文件名
            minify:{ // 配置html文件压缩
                collapseWhitespace:true, // 去掉多余的空格和回车符
                removeComments:true, // 移出注释
            },
        }),
    ],   
}

5. 打包前清除dist目录

1. 安装：cnpm i clean-webpack-plugin -D
2. 引入和配置：

// 打包前清除dist目录 es6语法解构对象
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// 6. webpack配置插件
    plugins:[
        // 打包前清除dist目录
        new CleanWebpackPlugin(),
    ],

6. 兼容老版本babel

安装：cnpm i -D @babel/core @babel/preset-env babel-loader core-js

module.exports = {
// 指定打包文件所在的目录
    output: {
        environment: { // 告诉webpack不使用箭头函数
            arrowFunction: false,
        },
    },
// 指定webpack 打包时要使用的模块
    module:{
        // 指定要加载的规则
        rules:[
            {
                test:/\.ts$/, // test指定的是规则生效的文件
                use:[// 要使用的loader
                    {// 配置Babel
                        loader: "babel-loader",
                        // 设置Babel
                        options: {    
                            presets:[// 设置预定义环境
                                [ //指定环境的插件
                                    "@babel/preset-env",
                                    {// 配置信息
                                        "targets":{"ie":"11"}, // 要兼容的浏览器
                                        "corejs":"3",// 指定corejs的版本
                                        "useBuiltIns":"usage",//usage表示按需加载
                                    },
                                ],
                            ],
                        },
                    },
                    // ts的loader
                    "ts-loader", 
                ],
            },
        ],
    },
// 用来设置引用模块
    resolve: {
        extensions:['.ts','.js'],
    },
}

5. 开发服务器

修改代码可以自动更新。开发时推荐用。

步骤：
1.安装：cnpm i webpack-dev-server -D
2. 启动：npm run dev 或者npx webpack serve
3. 打包：npm run build或者npx webpack
注意：由于是从服务器地址打开，打开的是自身文件，并没有直接打包，所以代码修改完重新打包一次更新。

module.exports = {
	devServer: {
        port: 8080, //配置端口号
        open: true, // 浏览器自动打开打包后的默认打包文件
    },

    // 把源码和开发代码作映射
    devtool:"inline-source-map", // 可以直接在源码上进行调试
    
}

三、Vite 打包

开发时，并不对代码打包，直接采用ESM的方式来运行项目
在项目部署时，再对项目进行打包
除了速度快，Vite使用也更方便（开箱即用）

一、基本使用步骤搭建：

 1. 安装：`npm i vite -D --`
 2. vite的源码目录就是项目根目录
 3. 启动开发服务器：`npx vite`  --会默认生成一个开发服务器 端口号:5173
 4. 打包: `npx vite build`
 5. 预览打包后的代码：`npx vite preview` --也是启动一个服务器 端口号:4173

二、使用命令构建：

 搭建一个vite项目：`npm create vite`

三、vite 配置文件

1.配置文件：在根目录添加一个文件：vite.config.js
2.装一个插件：
例：
npm i -D @vitejs/plugin-legacy
加一个压缩代码的插件：npm i -D terser
格式：

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy" // 引入插件

// vite 用es6的模块化暴露对象
export default defineConfig({ //defineConfig会有提示代码
    plugins:[
        legacy({
            targets:["defaults","ie 11"]
        })
    ]
})

四、vite启动项目

npm init vite@latest 项目名 --启动最新的vite