98-配置webpack打包webpack配置项目五大核心 entry：打包入口，确定打包资源 output：打包出口

webpack配置项目

五大核心

entry：打包入口，确定打包资源
output：打包出口，打包后的文件位置
mode：确定打包的模式
loader：打包规则
plugins：打包时用到的第三方插件，对于非js类的文件打包需要使用插件完成

配置

在当前目录下创建webpack.config.js文件

配置打包模式与入口

module.exports = {
    //打包模式
    mode:"development",
    // 入口文件
    // entry: './src/js/index.js'
    // 文件名称:"资源目录"
    entry:{
        index:"./src/js/index.js"
    }
  };

配置出口

//引入路径
const path = require("path")
module.exports = {
    ...
    //出口文件 指定结构目录
    output: {
        //当前的结构路径 获取绝对路径作为出口路径配置
        path: path.resolve(__dirname, 'dist'),
        // 打包完成之后项目的名称
        filename: './js/[name].js',
        // 清除之前的dist文件夹
        clean:true
      }
  };

执行打包命令
```
npx webpack
```

js打包配置

module.exports = {
    //打包模式
    mode:"development",
    // 入口文件
    // entry: './src/js/index.js'
    // 文件名称:"资源目录"
    entry:{
        index:"./src/js/index.js",
        login:"./src/js/login.js",
    }
  };

优化代码

//使用数组保存主页面名称信息
let pageName = ["index","login","register"]
function entryList(){
    let obj = {}
    pageName.forEach(item=>{
        obj[item] = `./src/js/${item}.js`
    })
    // console.log(obj);
    return obj
}
module.exports = {
    //打包模式
    mode:"development",
    // 入口文件
    // entry: './src/js/index.js'
    // 文件名称:"资源目录"
    entry:entryLisy()
  };

html打包

主要效果：打包html文件，相关文件(js、css)进行自动引入

安装插件

npm install --save-dev html-webpack-plugin

引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

配置打包信息

module.exports = {
        ....
      //配置安装包
      plugins: [
        //html配置
        new HtmlWebpackPlugin({
            //1.确定html源文件路径
            template:"./src/html/index.html",
            //2.打包完成之后的文件路径和名称
            filename:"./html/index.html",
            //3.引入对应的js文件
            chunks:["index"]
        })
      ]
  };

css打包

将样式文件引入到js文件中
```
import "css目录"
```

下载loader配置打包规则

npm install --save-dev style-loadernpm install --save-dev css-loader

配置loader

module.exports = {
        .....
    //配置规则    
      module: {
        rules: [
            //配置css规则
          {
            test: /.css$/i,
            use: [
                "style-loader", //通过js在html中添加一个style标签，将样式写入style标签中
                "css-loader"],//将css中的代码转换到js当中
          },
        ]
      },
  };

当前css文件会编译在主js文件中

将css作为独立的文件存放，使用插件配置
```
npm install --save-dev mini-css-extract-plugin
```

引入插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

配置插件

module.exports = {
      ....
      plugins: [
        //html页面配置
        ...htmlList(),
        //css单独文件配置
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })],
      //配置规则
      module: {
        rules: [
            //配置css规则
          {
            test: /.css$/i,
            use: [
                // "style-loader", //通过js在html中添加一个style标签，将样式写入style标签中
                MiniCssExtractPlugin.loader,
                "css-loader"],//将css中的代码转换到js当中
          },
        ]
      },
  };

css文件压缩

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

引入压缩插件

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

配置

module.exports = {
    //配置安装包
    plugins: [
        ....
        //css压缩插件
        new CssMinimizerPlugin()
    ],
};

sass打包

将样式文件引入到js文件中
```
import "sass路径"
```

安装loader插件

npm install sass-loader sass webpack --save-dev

配置sass打包规则

    module: {
        rules: [
            ....
            //配置scss规则
            {
                test: /.s[ac]ss$/i,
                use: [
                  // 将 JS 字符串生成为 style 节点
                //   'style-loader',
                MiniCssExtractPlugin.loader,
                  // 将 CSS 转化成 CommonJS 模块
                  'css-loader',
                  // 将 Sass 编译成 CSS
                  'sass-loader',
                ],
              },
        ]
    },

图片打包

下载html-loader进行图片打包
```
npm install --save-dev html-loader
```

配置打包规则

   module: {
        rules: [
            。。。。
            //对html中的图片文件验证
            {
                test: /.html$/i,
                loader: "html-loader",
            },
            //配置图片在js文件中的解析规则
            {
                test: /((.jpg)|(.png)|(.jpeg)|(.gif)|(.svg)|(.psd)|(.tif)|(.bmp)|(.webp))$/i,
                //文件类型
                type: "asset",
                //图片编译完成之后的路径值
                generator: {
                    filename: 'images/[hash][ext][query]'
                },
                // 将小图标转换为base64的格式
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024   //8kb
                    }
                }
            }
        ]
    },

在js文件中不能直接使用图片资源，需要将资源路径引入使用

import imgSrc from "../assets/images/3333.png"
document.querySelector(".two").src = imgSrc

配置jquery

安装jquery
```
npm i jquery@3.5.1 --save
```
在webpack.config.js中引入模块
```
const webpack = require("webpack")
```

配置

    plugins: [
        ......
        //配置jquery
        new webpack.ProvidePlugin({
            "$":"jquery"
        })
    ],

配置bootstrap

下载

npm i bootstrap@4 popper.js@1.16.1 --save

在对应主js文件中引入bootstrap使用

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.js"