Webpack 打包工具

使用Webpack

步骤：
1、新建并初始化项目，编写业务源代码

npm i webpack webpack-cil --save-dev

2、下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令

"scripts":{
    "build":"webpack"
},

3、运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

npm run build

修改Webpack打包入口出口

Webpack 配置：影响 Webpack 打包过程和结果
步骤：
1、项目根目录，新建 webpack.config.js 配置文件

const path = require('path')

module.exports = {
    entry:path.resolve(__dirname,"src/login/index.js"),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'.login/index.js'
    }
}

2、导出配置对象，配置入口，出口文件的路径
3、重新打包观察
注意：只有和入口产生直接/间接的引入关系，才会被打包

打包Webpack

步骤：
1、准备用户登录页面
2、编写核心 JS 逻辑代码
3、打包并手动复制网页到 dist 下，引入打包后的 js，运行
核心：Webpack 打包后的代码，作用在前端网页中使用

1702602487071

自动生成html文件

插件 html-webpack-plugin： 在 Webpack 打包时生成 html 文件
步骤：
下载 html-webpack-plugin 本地软件包

npm i html-webpack-Plugin --save-dev

配置 webpack.config.js 让 Webpack 拥有插件功能

const HtmlWebpackplugin = require('html-webpack-plugin')

module.exports = {
    //...
    plugins:[
        new HtmlWebpackPlugin = require('hhtml-webpack-plugin')

        module.exports = {
        new HtmlWebpackPlugin({
        template:'./public/login.html',
        filename:'./login/index.html'
        })
        }
    ]
}

重新打包观察效果

打包CSS代码

加载器 css-loader：解析 css 代码
加载器 style-loader：把解析后的 css 代码插入到 DOM
步骤：
1、准备 css 文件代码引入到 src/login/index.js 中（压缩转译处理等）
2、下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

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

moduule.exports = {
    //...
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"],
            },
        ],
    },
};

4、打包后观察效果

注意：Webpack 默认只识别 js 代码

优化 - 提取CSS代码

插件 mini-css-extract-plugin：提取 css 代码
步骤：
1、下载 mini-css-extract-plugin 本地软件包

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

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

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

module.exports = {
    //...
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:[MiniCssExtractPlugin.loader,"css-loader"],
            },
        ],
    },
    plugin:[
        //...
        new MiniCssExtractPlugin()
    ]
};

3、打包后观察效果

注意：不能和 style-loader 一起使用
好处：css 文件可以被浏览器缓存，减少 js 文件体积

优化 - 压缩过程

问题：css 代码提取后没有压缩
解决：使用 css-minimizer-webpack-plugin 插件
步骤：
1、下载 css-minimizer-webpack-plugin 本地软件包

npm install css-minimizer-webpack-plugin --save-dev

2、配置 webpack.config.js 让 webpack 拥有该功能

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
    //...
    // 优化
    optimizertion:{
        //最小化
        minimizer:[
            //在webpack@5中，你可以用'...'语法来扩展现有的minimizer
            '...',
            new CssMinimizerPlugin(),
        ],
    }
};

3、打包重新观察

打包less代码

加载器 less-loader：把 less 代码编译为 css 代码
步骤：
1、新建 less 代码（设置背景图）并引入到 src/login/index.js 中
2、下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

3、配置 webpack.config.js 让 Webpack 拥有功能

//...
module.exports = {
    //...
    module:{
        rules:[
            //...
            {
                test:/\.less$/i,
                use:[MiniCssExtractPlugin.loader,"css-loader","less-lloader"]
            }
        ]
    }
}