WebPack

第一节、基本概念

前端资源构建工具/前端打包工具

具体功能：

• 代码的转换 sass—css es6–es5 ts–>js 【提供代码的兼容性】
• 零散的文件—进行统一的管理 【提供页面运行的效率】
• 压缩–源代码中可能存在大量的空格 换行。
• 提供了模块化的思想。【将每一HTML CSS JS 图片 当成一个独立的模块 ，模块之间互相任意的组合】

官网

https://webpack.docschina.org/

第二节、webpack的核心配置文件

作用：webpack所有的功能的实现都是通过核心配置文件来进行指定

注意：每一个被webpack打包的项目都会有一个核心配置文件，核心配置的名字：webpack.config.js

核心的配置项：

module.exports = {
    mode:"development(开发模式)/production（生产模式）"    //打包模式
    entry:{} //打包的JS的入口 -- 从哪打
	output:{} //打包的出口 -- 打到哪
	
	plugins:[]//插件的配置  
	module:{rules:[]}
	devServer: //服务端的配置{通过代理来实现前端跨域}
}

第三节、webpack打包

准备工作

• 创建1个空项目
• 初始化项目 npm init
• 安装插件 npm i webpack webpack-cli -D [关于开发包–打包后的代码不存在 与生产包–最终打包后的代码存在的]
• 在项目根目录中创建src文件夹【放置你的源代码】。在项目根目录中创建webpack.config.js的核心配置文件

打包JS文件

注意：webpack默认只能打包JS文件

• 在src目录中创建JS文件

• let path = require("path")
  module.exports = {
      mode:"production",
      entry:{  //指定需要打包哪些JS文件
          //属性名：属性值
          login:"./src/js/user/login.js"
      },
      output:{  //指定需要打包到哪个地方去
          path:path.resolve(__dirname,"dist"),   //配置出口的目录 path.resolve 目录的拼接   __dirname 动态获取当前项目的根目录
          filename:"xx.js"//打包的文件名
      }
  }
  

• 执行打包命令

  npx webpack
  

  打包多个JS文件【这多个JS文件之间完全独立】

  let path = require("path")
  module.exports = {
      mode:"production",
      entry:{  //指定需要打包哪些JS文件
          //属性名：属性值  每一个属性名 对应出口中的一个文件
          login:"./src/js/user/login.js",
          registor:"./src/js/user/registor.js"
      },
      output:{  //指定需要打包到哪个地方去
          path:path.resolve(__dirname,"dist"),   //配置出口的目录 path.resolve 目录的拼接   __dirname 动态获取当前项目的根目录
          filename:"js/[name].js"//打包的文件名    [name] 会自动的找 入口配置的每一个文件的属性名作为打包的文件名
      }
  }
  

  打包多个JS文件【这多个JS文件之间有关联关系】

  1.找一个主文件【大哥】

  2.让其他的小弟依附于大哥

  

  3.打包打大哥

  

打包HTML

注意：webpack 默认只能打包JS文件，如果需要打包其他的文件，则需要安装对应的插件

html-webpack-plugin

• 安装HTML打包插件

npm i html-webpack-plugin -D

• 在webpack的主配置文件中引入下载的插件

//引入打包HTML的插件
let  HtmlWebpackPlugin = require("html-webpack-plugin");

• 配置插件 每一个HTML页面都是一个HtmlWebPack的对象

plugins:[
    new HtmlWebpackPlugin({  //创建一个htmlwebpack打包插件对象  每一个HTML代码都对应一个对象
        chunks:["login"],  //当前页面需要引入的JS文件
        template:"./src/html/user/login.html",  //打包时文件的入口--需要被打包的HTML代码
        filename:"./html/login.html"  //出口【默认都是在path 指定的路径  dist目录】
    })
]

[补充] 清理插件

• 安装插件

npm i clean-webpack-plugin -D

• 使用插件

  • 引入

  let {CleanWebpackPlugin} = require("clean-webpack-plugin");
  

  • 使用
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbqLyHZX-1680329400091)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221205154347581.png)]

打包样式

打包CSS【样式跟随JS走–依附于JS文件】

注意：如果需要让webpack帮你打包css ,css文件必须是一个单独的文件。虽然只有这样webpack才会给你打包css代码，但是并不意味着写的内联的样式不会跟随你的html代码。

• 安装插件

css-loader   核心插件
style-loader 打包内联样式
mini-css-extract-plugin 打包外联样式

• module

配置内联样式

module:{
    rules:[
        {
            test:/\.css$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 
            use:["style-loader","css-loader"]    //使用哪些插件来打包上诉匹配到的文件
        }
    ]
}

配置外联样式

1、安装插件

2、配置module 中rules

//引入外联样式插件
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
--------------
module:{
    rules:[
        {
            test:/\.css$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 
            use:[MiniCssExtractPlugin.loader,"css-loader"]    //使用哪些插件来打包上诉匹配到的文件
        }
    ]
}

3、在plugins中配置出口

打包SCSS

1.安装插件

sass-loader 
node-sass 

module:{
    // rules:[
    // {
    //     test:/\.css$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 
    //     use:["style-loader","css-loader"]    //使用哪些插件来打包上诉匹配到的文件
    // },
    // {
    //     test:/\.scss$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 扫描scss
    //     use:["style-loader","css-loader","sass-loader"]    //使用哪些插件来打包上诉匹配到的文件
    // }
    //]

    rules:[
        {
            test:/\.css$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 
            use:[MiniCssExtractPlugin.loader,"css-loader"]    //使用哪些插件来打包上诉匹配到的文件
        },
        {
            test:/\.scss$/i,   //指定需要打包哪些文件-- 根据这个规则匹配文件 
            use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]    //使用哪些插件来打包上诉匹配到的文件
        }
    ]
}

打包图片

• 下载插件

  file-loader  //核心插件
  url-loader  //css样式设置的图片
  html-withimg-loader//通过img标签引入的图片
  
  npm i url-loader file-loader html-withimg-loader -D
  

• 配置 module[打包html js css的步骤都需要有]

{
    test:/\.(png|jpg|jpeg|gif)/i,
    use:[{
        loader:"url-loader", //通过background-img url的形式设置
        options:{
            limit:1024*8, //如果图片不超过8K 则转为字符串
            outputPath:"./img", //打包到dist的img中
            esModule:false
        }
    }]
},
{
    test:/.\html$/i,   //配置通过img标签引入的图片 扫描的扫描的时候  需要扫描html页面
    use:["html-withimg-loader"]
}

注意事项：如果需要打包被css样式引用的图片，需要将css的loader 降为5.2.6

第四节、前端开服

• 下载插件

npm i webpack-dev-server -D

• 打包开服

npx webpack serve

devServer:{
    port:8081,  //配置端口号
    open:true,  //一旦启动成功会自动打开浏览器
    hot:true  //热更新
}

注意：打包jQuery 在需要使用页面对应的JS文件中

import $ from "../../js/user/jquery-3.6.0.min.js"