Webpack 基础知识

本文章是根据尚硅谷2022版视频整理的笔记，有错误请指正。

1.基本配置

首先创建好自己的项目，打开项目根目录终端，首先进行初始化

npm init -y

此时会生成package.json，注意package.json中的name不能叫做package，否则会报错

下载依赖

npm i webpack webpack-cli -D

在项目根目录下新建文件  webpack.config.js

const path = require("path") //nodejs核心模块，专门用来处理路径问题
module.exports ={
    //入口 从哪个文件作为打包入口，写相对路径和绝对路径都行
    entry:'./src/main.js',

    //输出
    output:[
        //打包路径  绝对路径  __dirname是node.js的变量，代表当前文件的文件夹目录
        path:path.resolve(__dirname,"dist"),

        //输出文件名
        filename:'main.js' 
    ],

    //加载器
    module:[
        rules:[
            
        ]
    ],

    //插件
    plugins:[],

    //模式 development 为开发模式 
    mode:'development'
}

启用webpack

npx webpack

此时webpack会将文件打包输出到dist目录下

2.处理样式资源

下载css、less、sass、stylus各自对应的包

//css
npm i css-loader style-loader -D

//less
npm i less-loader -D

//sass
npm i sass-loader sass -D

//stylus
npm i stylus-loader -D

在webpack.config.js文件里的module进行配置

module:[
        rules:[
                //css  注意这里没有引号！
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
                //less
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
                //sass或scss
            {
                test:/\.s[ac]ss$/,
                use:["style-loader","css-loader","sass-loader"]
            },
                //styl
            {
                test:/\.styl$/,
                use:["style-loader","css-loader","stylus-loader"]
            },
        ]
    ],

在main.js里（入口文件）引入各样式资源文件，否则webpack不打包

import "./css/index.css"
import "./less/index.less"
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

记得在html页面引入打包后的js文件才能看到效果

<script src="../dist/main.js"></script>

3.处理图片资源

在webpack.config.js中的module的rules里继续配置

    {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
      },

代码中的parser部分是对图片资源进行了优化，将小于某个大小的图片转化成了data URL 的形式

图片资源优化的优点是可以减少请求的数量，缺点是打包体积变得更大

4、修改输出资源的名称和路径

    //js文件
    output:{
        filename:'static/js/main.js'
    }
    //图片
    module:[
        rules:[
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                  dataUrlCondition: {
                    maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
                  },
                },
                generator: {
                  // 将图片文件输出到 static/imgs 目录中
                  // 将图片文件命名 [hash:8][ext][query]
                  // [hash:8]: hash值取8位
                  // [ext]: 使用之前的文件扩展名
                  // [query]: 添加之前的query参数
                  filename: "static/imgs/[hash:8][ext][query]",
                },
              },
        ]
    ]

上述代码中将js文件都打包到static/js的目录下，在generator中将图片资源打包到static/imgs目录下

5.自动清空上次打包资源

在output中添加clean:true，就能够将新的打包覆盖上一次的打包资源

    output:{
        filename:'static/js/main.js',
        clean:true
    }

6.处理iconfont等其他资源

记得先在main.js和index.html里引用iconfont，否则webpack不打包

{
    test:/\.(ttf|woff2?|map4|map3|avi)$/,
    type:"asset/resource,
    generator:{
        filename:"static/media/[hash][ext][query]
    }
}

type:"asset/resource" 和 type:"asset" 的区别

type:"asset/resource" 相当于file-loader，将文件转化成webpack能识别的资源

type:"asset" 相当于url-loader，将文件转化成webpack能识别的资源，同时小于某个大小的资源会处理成data URL形式

7.JS资源的兼容性处理

（1）Eslint：用来检测js和jsx语法的工具，可以配置各项功能

使用Eslint主要是配置Eslint文件，里面写上rules规则，之后就会以这个规则对代码进行检查

首先下载依赖

npm i eslint-webpack-plugin eslint -D

可以在根目录下创建.eslintrc.js文件，或者在package.json里的eslintConfig修改，也可以下载Eslint插件，此时项目所有的文件都默认进行Eslint检查，因此可以在项目根目录下新建.eslintignore文件来忽略打包后的文件

# 忽略dist目录下所有文件
dist

以.eslintrc.js为例

module.exports = {

    //继承Eslint规则
    extends:["eslint:recommend"],

    //环境变量
    env:{
        node:true, //启用node全局变量
        browser:true, //启用浏览器中全局变量
    }

    // 解析选项
    parserOptions: {
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
        jsx: true // 如果是 React 项目，就需要开启 jsx 语法
      }
    },

    // 具体检查规则
    rules: {
        "no-var":2,  //不能使用var定义变量
    },


    // ...
    // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

在webpack.config.js中也需要进行配置

//首先导入
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

//在plugins中进行配置
plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],

（2）Babel：将ES6语法编写的代码转换成向后兼容的JavaScript语法

配置文件，在项目根目录下新建babel.config.js，或者在package.json中的babel修改

先下载依赖

npm i babel-loader @babel/core @babel/preset-env -D

以babel.config.js配置文件为例

module.exports={
    //预设 一组Babel插件，扩展Babel功能
    presets:["@babel/preset-env"],
}

@babel/preset-env：智能预设，允许使用最新的JavaScript

@babel/preset-react：用来编译React jsx语法的预设

@babel/preset-typescript：用来编译TypeScript语法的预设

修改webpack.config.js配置文件

    {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

8.开发服务器与自动化

监听src下面的目录文件，一旦改变就自动重新打包

下载依赖

npm i webpack-dev-server -D

在webpack.config.js里的plugins与mode之间添加

devSever:{
    host:"localhost",
    port:"8001",
    open:true, //是否自动打开浏览器
}

此时运行指令为

npx webpack serve

9.提取css成单独文件

预防闪屏现象

下载依赖

npm i mini-css-extract-plugin -D

webpack.config.js

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

plugins:{
    new MiniCssExtractPlugin({
        filename:"static/css/main.css"
    })
}

同时把module里所有的“style-loader”替换成MiniCssExtractPlugin.loader (注意后面没有双引号)

module:[
        rules:[
                //css  注意这里没有引号！
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,"css-loader"]
            },
                //less
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
            },
                //sass或scss
            {
                test:/\.s[ac]ss$/,
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            },
                //styl
            {
                test:/\.styl$/,
                use:[MiniCssExtractPlugin.loader,"css-loader","stylus-loader"]
            },
        ]
    ],