webpack 模块

减少文件数量
缩减代码体积
提高浏览器打开的速度

安装

npm init -y //初始化包环境（得到package.json文件）
npm install webpack webpack-cli -D //安装依赖包
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  } //配置webpack

运行

执行 npm run build 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)

导入导出模块方式

// require这是nodejs导入
// const add = require("./add/add")

// 导出方式一
export default 函数/对象/变量

// es6模块化导入 方式一
// import add from "./add/add.js"

// 导出方式二
export js关键词

// 方式二：
import { add } from "./add/add"

自定义导入导出文件

配置文档

在webpack.config.js中配置选项

const path = require("path");
module.exports = {
    entry: "./src/main.js", // 配置打包入口文件
    output: {               // 配置打包出口文件
        path: path.resolve(__dirname, "dist"), // 配置打包出口文件夹的路径，path.resolve作用：拼接路径
        filename: "bundle.js"                  // 配置打包出口文件的名字
    }
}

示例

// 引入第三方模块的时候，直接写模块名称即可
import $ from "jquery";

// 隔行换色功能
$("#_ul li").odd().css("color", "green"); // 奇数行
$("#_ul li").even().css("color", "red");  // 偶数行

html-webpack-plugin插件打包html文件

配置文档

npm install html-webpack-plugin -D //下载插件

配置插件

module.exports = {

    entry: "./src/main.js",
    plugins: [ // plugins注意：这个单词都是小写的，这个配置专门写插件的地方
        new HtmlWebpackPlugin({
            template: "./public/index.html" // 表示以./public/index.html为打包模板，生成到打包后的文件夹里面
        })
    ]
}

webpack-使用css加载器

css-loader配置文档

style-loader配置文档

npm install css-loader style-loader -D //下载加载器

需要引入css文件到入口js中

// 引入css样式，es6模块化，引入样式的方法

import "./css/index.css"

module: {
        rules: [ // 配置loader的加载规则
            {   // 配置css加载器
                test: /\.css$/i, // 表示匹配以.css结尾的文件
                /**
                 * css-loader: 让webpack能够处理css类型的文件
                 * style-loader：把css插入到DOM中
                 * 注意：一定要先执行css-loader再style-loader因此use数组中的书写顺不能变
                 * webpack执行代码的顺序是从上到下，“ 从右到左 ”。
                 */
                use: ["style-loader", "css-loader"] // 表示匹配到以.css结尾的文件后使用这两个loader来处理
            }]
    }

webpack处理less文件

less-loader文档

npm install less less-loader -D //下载加载器

需要引入css文件到入口js中

// 引入less样式

import "./less/index.less"

      { // 配置less加载器
           test: /\.less$/,
           use: ["style-loader", "css-loader", "less-loader"]
       }

webpack处理图片文件

图片处理文档

webpack5在webpack.config.js – 针对图片文件设置type: "assets"

// 引入图片，创建一个img标签，插入到body中 import _src from "./assets/三剑客.png";

{ // 配置webpack处理图片功能，无需下载任何loader，因为webpack5提供了一个asset module技术来处理图片和字体图标
                // 当type的值为asset的时候
                // 大于8kb的图片，会直接打包进dist文件夹下
                // 小于8kb的图片，会直接转成base64t图片类型，打包进js中
                test: /\.(png|jpg|gif|jpeg)$/i,
                type: "asset"
            }

小于8KB转base64字符串进js里, 大于8KB输出文件

图片翻译成了base64, 放到了js文件中
好处: 浏览器不用发请求了，直接可以读取, 速度快
坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失

webpack处理字体图标

针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)即可

// 字体图片的使用

import "./assets/fonts/iconfont.css";

{ // 处理字体图标
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                type: "asset/resource", // 直接将字体图标文件打包进dist文件夹里面
                generator: {
                    // [name]: 表示获取到原文件的文件名
                    // [hash:6]: 表示生成一个6位数据的哈希值
                    // 哈希值：指的是由字母和数字随机生成的一串字符串
                    // [ext]: 表示获取到原文件的后缀名
                    filename: "font/[name].[hash:6][ext]"
                }
            }

webpack对JS语法降级

babel官网

babel-loader文档

npm install babel-loader @babel/core @babel/preset-env -D //下载

{ // js语法降级处理
                test: /\.js$/,
                // 第三方依赖包一般都是做了语法降级处理的，
                // 因此我们配置降级处理的时候需要排除他们，不需要处理他们了。
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }

webpack-dev-server模块使用

webpack-dev-server文档

npm install webpack-dev-server -D

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve"
  }, //packjson配置

npm run serve //启动服务器

module.exports = {
    mode: "development", //mode: "development", // 配置打包环境 --- development:表示开发环境，production：表示生产环境

devServer: {
        port: 3000, //修改打开的端口
        open: true  //启动服务器自动打开浏览器
    },

webpack 模块打包工具