初识webpack5webpack 命令 npm init -y 初始化项目 npm i webpack webpack

webpack 命令
1. npm init -y 初始化项目
2. npm i webpack webpack-cli -D 安装webpack脚本到开发依赖
3. npx webpack ./src/main.js --mode=development webpack打包 main.js为打包入口，--mode指定打包环境。 develoment测试环境， production生成环境
五大核心概念
1. 配置文件名：根目录下 webpack.config.js
2. 入口 entry
3. 输出 output
4. 加载器 module
5. 插件 plugins
6. 模式 mode

    const path = require("path") // nodejs模块 专门处理路径问题
    module.exports = {
        entry: "./src/main.js",  //入口(相对路径)
        output: {
            path: path.resolve(__dirname, "dist"), //输出 绝对路径 __dirname指的是当前根目录
            filename: "main.js"
        },
        module:{ //加载器。处理loader
            rules:[]
        },
        plugins:[], //配置插件
        mode:'development' 打包模式
    }

当项目有webpack.config.js文件时，打包只需 npx webpack 3. css-loader

增加处理css-loader
对照官网loader提示，填写即可 webpack.docschina.org/loaders/css…

    module:{ //加载器。处理loader
        rules:[
            {
              test: /\.css$/, 查找 以.css为结尾的文件进行编译
              //loader:'xxxx' //loader 只可以使用一个，user可以使用多个loader
              use: [ // 原则 从右到左，从下到上
                  "style-loader", // npm install --save-dev style-loader 将js中的css通过添加style添加到html中
                  "css-loader" // npm install --save-dev css-loader 将css资源编译成commonjs的模块到js中
              ],
            },
        ]
    },

图片文件处理

    module:{ //加载器。处理loader
        rules:[
            {
                test: /\.(png|jpe?g|gif|webg|svg)/,
                type: "asset", // 开启转base64
                parser: {
                  dataUrlCondition: {
                    maxSize: 10 * 1024, // 小于10kb的图片转换成base64格式，减少请求，缺点：增大体积，图片越大，增加越多
                  },
                },
                generator: {
                  //输出目录
                  // 文件名 [哈西值:10]限制10位[原后缀名][后缀]如?xxxx
                  filename: "static/images/[hash:10][ext][query]",
             },
          },
        ]
    },

字体及其他资源处理

      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)/,
        type: "asset/resource",//不需转成base64
        generator: {
          //输出目录
          // 文件名 [哈西值:10]限制10位[原后缀名][后缀]如?xxxx
          filename: "static/media/[hash:10][ext][query]",
        },
      },