webpack打包过程

webpack是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。下面是基于webpack5，对整个打包流程进行梳理。

一. webpack初体验

1. 初始化 package.json
   命令：npm init -y
2. 下载 webpack webpack-cli
   如果想要到将其下载到当前项目中（版本独立），则加上 --save-dev
   完整命令： npm i webpack webpack-cli --save -dev
3. 修改 package.json文件
   在生成的 package.json文件中添加 “build”: “webpack” 就可以使用自定义命令打包，其中，build是自己取的名字

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

4. 运行自定义命令打包观察效果
   命令：npm run build

二. webpack开发环境 基本配置

2.1.创建配置文件

1. 创建文件 webpack.config.js
2. 在 entry 中可以配置入口文件路径，在 output 中配置输出的文件路径

const path = require('path');
// 导出配置对象，配置入口，出口文件路径
module.exports = {
    // 入口
    entry: path.resolve(__dirname, 'src/login/index.js'),
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: './login/index.js',
        clean: true  //生成打包后内容之前,清空输出目录
    },
};

3. 重新打包观察
   运行命令 npm run build

2.2 打包 html 资源

1. 下载 html-webpack-plugin 本地软件包
   命令：npm i html-webpack-plugin --save-dev
2. 配置 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 的配置
	// 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
	// 需求：需要有结构的 HTML 文件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/login.html'),   // 模版文件
            filename: path.resolve(__dirname, 'dist/login/index.html')  // 输出文件
        })
    ]
};

3. 重新打包观察
   运行命令 npm run build

2.3 打包css代码

1. 将准备的css代码引入到js中

// 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

2. 下载 css-loader 和 style-loader 本地软件包
   命令：npm i css-loader style-loader -save-dev
3. 配置 webpack.config.js

module.exports = {
	// 其他代码
	......
	// 加载器（让 webpack识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}

4. 重新打包观察
   运行命令 npm run build

优化-提取 css 代码到单独的 css 文件中

上述打包css代码的过程并没有将css代码打包成一个单独的文件，而是打包在了html文件中，提取css到单独的css文件的步骤：

1. 下载 mini-css-extract-plugin 本地软件包
   命令：npm i mini-css-extract-plugin --save-dev
2. 配置 webpack.config.js

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

module.exports = {
	// 其他代码
	......
	// 插件（给Webpack提供更多功能）
    plugins: [
        // 其他代码
		......
        new MiniCssExtractPlugin()   // 生成css文件
    ],
	// 加载器（让 webpack识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
}

3. 重新打包观察
   但是使用该插件压缩的css代码，并没有压缩我们自己写的css代码，只压缩了我们引用的css代码

优化-压缩 css 代码的步骤

1. 下载 css-minimizer-webpack-plugin 本地软件包
   命令：npm i css-minimizer-webpack-plugin --save-dev
2. 配置 webpack.config.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
	// 其他代码
	......
	// 插件（给Webpack提供更多功能）
    plugins: [
        // 其他代码
		......
        new MiniCssExtractPlugin()   // 生成css文件
    ],
	// 加载器（让 webpack识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    // 优化
    optimization: {
        // 最小化
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释（保证 js 代码还能压缩）
            `...`,
            new CssMinimizerPlugin(),
        ]
    }
}

3. 重新打包观察

2.4 打包lss代码

1. 新建 less 文件并引入到js 中

// 新建 less 代码并引入到对应的js 中
import './index.less'

2. 下载 less 和 less-loader 本地软件包
   命令：npm i less less-loader --save-dev
3. 配置 webpack.config.js

// 加载器（让 webpack识别更多模块文件内容)
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },

4. 重新打包观察

2.5 打包图片资源

webpack5 内置了资源模块（字体，图片等）打包，无需额外Loader，只需要简单配置即可处理图片资源。

1. 创建 img 标签并动态添加到页面

// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

2. 配置 webpack.config.js

// 加载器（让 webpack识别更多模块文件内容)
    module: {
        rules: [
        // 处理图片资源
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset',
                generator: {
                    filename: 'assets/[hash][ext][query]'
                }
            },
        ],
    },

3. 重新打包观察

三. 搭建开发环境

之前改代码，需要重新打包才能运行查看，效率很低。
可以配置webpack-dev-server快速开发应用程序，可以启动Web服务，自动检测代码变化，热更新到网页。
步骤

1. 下载 webpack-dev-server 软件包到当前项目
   命令：npm i webpack-dev-server --save-dev
2. 在 package.json 中配置自定义命令 dev

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack serve --open"
  },

3. 在 webpack.config.js 设置打包的模式为开发模式

module.exports = {
    // 打包模式 (development 开发模式-使用相关内置优化)
    mode:'development',
 }

4. 使用 npm run dev 启动开发服务器

注意1：webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务
注意2：默认以 public 文件夹作为服务器根目录
注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）