wbpack基础

基本使用

先使用npm init -y 指令初始化一个packgae.json文件（包描述文件）

将package.json文件中main更改为 src目录下的main.js文件

下载依赖 webpack、webpack-cli

npx指令是将node_modules中.bin临时添加为环境变量

使用npx webpack ./src/main.js --mode=development(开发模式)

总结：

webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错

不管你在模式中创建了js还是css文件，都要导入到入口文件中，才能被打包到一个指定区域的文件中，然后打包好了，再到public的html 中去引入才能被浏览器解析

五大核心概念

1、entry（入口）

指示webpack从哪个文件开始打包

2、output（输出）

指示webpack打包完的文件输出到哪里去，如何命名等

3、loader（加载器）

webpack本身只能处理js、json等资源，其他资源给需要借助loader，webpack才能解析

4、plugins（插件）

扩展webpack功能

5、mode（模式）

development 开发模式 production 生产模式

设置配置文件---在根目录下新建webpack.config.js文件 内容如下

const path = require('path'); //node.js核心模块，专门用来处理路径问题
​
module.exports = {
    //入口
    entry: './src//main.js', //相对路径
    // 输出
    output: {
        //文件的输出路径
        //__dirname 是node.js的变量，代表当前的文件夹目录
        path: path.resolve(__dirname, 'dist'), //绝对路径
        //文件名
        filename: 'main.js',
    },
    // 加载器
    module: {
        rules: [
            //loader的配置
        ],
    },
    // 插件
    plugins: [
        //plugin的配置
    ],
    // 模式
    mode: 'development',
}

设置完配置文件打包就只用输入npx webpack即可

开发模式介绍

顾名思义就是开发时使用的模式

在该模式下主要做两件事：

1、编译代码使浏览器能识别运行

2、代码质量检查，树立代码规范

处理样式资源

使用webpack处理css、less、sass、styl样式资源

建议查看官方文档使用，根据官方文档的快速开始进行初步尝试

处理css资源

先下载依赖 npm install --save-dev css-loader

再将css文件引入到main.js中

配置webpack文件，将代码写在rules中

   {
       test: /\.css$/i, //只检测.css文件
       use: [
           //执行顺序，从右到左（从下到上）
           "style-loader", //将js中css通过创建style标签添加到html文件中生效
           "css-loader", //将css资源编译成commonjs的模块到js中
       ],
   },

注：官方文档只让下载了css-loader加载器，直接启动会报错，还需将style-loader加载器下载，（官方文档中的示例只让下载加载器中的一种，所以我们学习时，要学会看use中的加载器自己是否下载过再去看是否下载）

处理less资源、处理sass（scss）资源、处理stylus资源

跟处理css类似，还是根据官方文档来

图片资源处理

webpack已经做了处理无需下载加载器，但是对图片进行优化还是需要在rules写入相应代码

如：想要将10kb以下的图片转为data URI

     {
         test: /\.(png|jpe?g|gif|webs|svg)$/,
         type: 'asset',
         parser: {
             dataUrlCondition: {
                 //小于10kb的图片转base64
                 //优点：减少请求数量  缺点：体积会大三分之一
                 maxSize: 10 * 1024 // 10kb
             }
         }
     }

修改输出文件目录

在配置文件中修改：将filename中的路径更改为想要输出的目录

        //入口文件打包输出的文件名
        filename: 'static/js/main.js',

图片路径也可更改：将以下代码写入到图片处理的地方（官方文档中输入asset中选择inline可查看相关文档）

       generator: {
           //输出图片的名字
           //[hash:10] hash值取前10位
           filename: 'static/images/[hash:10][ext][query]'
       }

自动清空上次打包内容

在配置文件中，在output内开启clean就能在打包时自动清空上次打包的内容

        //自动清空上次打包的内容
        clean: true

处理字体图标资源

将字体图标库下载到本地并引入到项目中，iconfont.css放入css文件夹中并在src下创建fonts文件夹存放ttf/woff/woff2三个文件（注意修改iconfont.css中这三个文件的路径）

再去rules中设置打包的文件输出路径以及名称长短（和图片类似）

     {
         test: /\.(ttf|woff2?)$/,
         type: 'asset/resource',
         generator: {
             //输出名字
             //[hash:10] hash值取前10位
             filename: 'static/media/[hash:10][ext][query]'
         }
     }

处理其他资源

就是在处理字体图标资源里面追加想要打包的资源类型

如：map3、map4、avi等

  test: /\.(ttf|woff2?|map3|map4|avi)$/,

处理js资源

因为webpack只能编译js中ES模块化语法，不能编译其他语法

使用Eslint完成代码格式检测，使用Babel针对js做兼容性处理

Eslint

定义：可组装的JavaScript和JSX（react语法）检查工具

首先需要安装eslint文件

npm install eslint-webpack-plugin --save-dev

注意: 如果未安装 eslint >= 7 ，你还需先通过 npm 安装：

npm install eslint --save-dev

因为是插件所以需要先在顶部引入再去plugins里new

const ESLintPlugin = require('eslint-webpack-plugin');

        new ESLintPlugin({
            //检测那些文件
            context: path.resolve(__dirname, 'src'),
        }),

在根目录下创建一个.eslintrc.js文件在里面配置eslint规则

module.exports = {
    //继承 Eslint 规则
    extends: ['eslint:recommended'],
    env: {
        Node: true, //启用node中全局变量
        browser: true //启用浏览器中全局变量
    },
    parserOptions: {
        ecmaVersion: 6, //es6
        sourceType: 'module' //es module
    },
    rules: {
        'no-var': 2, //不能使用 var 定义变量
    }
}

还需再创建一个类似git里面的忽略文件名为.eslintignore，将要忽略的打包文件名dist写在文件内

Babel（JavaScript编译器）

主要是将ES6编写的代码转换向后兼容

首先下载babel相关的包 （根据官方文档来使用）

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

根据官方文档将代码写入rules中

            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, //排除node_modules中的js文件（这些文件不处理）
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: ['@babel/preset-env']
                    // }
                }
            }

注释部分除了可以写在当前位置，还可以新建一个名为babel.config.js的文件来书写

module.exports = {
    //智能预设：能够编译ES6语法
    presets: ['@babel/preset-env']
}

HTML处理

按照文档安装和引入包（和Eslint引入方式相同）

不同：new里面的内容不同

        new HtmlWebpackPlugin({
            //模板：以public/index.html文件创建新的html文件
            //新的html文件特点：1、结构和原来一致 2、自动引入打包输出的资源
            template: path.resolve(__dirname, 'public/index.html'),
        })

开发服务器&自动化

通过服务器监视，修改代码后自动打包

下载包：npm i webpack-dev-server -D

然后在plugins中配置

    devServer: {
        //开发服务器：不会输出资源，在内存中编译打包
        host: 'localhost', //启动服务器域名
        port: '3000', //启动服务器端口号
        open: true, //是否自动打开浏览器 
    },

配置完成后，开启打包指令变为：npx webpack serve

生产模式

准备一个config文件夹，将webpack配置文件移动到里面，并且复制一份，修改两份文件的名称分别为：webpack.dev.js、webpack.prod.js。将两个文件内容进行相应的修改

开发文件修改

entry入口中的相对路径（相对于运行代码的目录）不用改，因为运行代码时还是在根目录上运行的

output中path中的绝对路径需要更改，使用../跳出当前文件夹（配置文件中所以涉及到绝对路径的都需要更改）

但是一般开发模式没有输出了，使用path可以写成：path:undefined 因为开发模式是在内存中编译的，不会输出

运行开发模式 npx webpack serve --config ./config/webpack.dev.js

生产文件修改

路径的修改还是和开发模式一样

将开发服务器段的代码删除

将模式mode改为：production

运行生产模式 npx webpack --config ./config/webpack.prod.js

因为生产模式没有dev-server所以指令就不用serve

如果显示图片过大报错，就通过代码加大文件允许体积，提升报错门栏

module.exports = {
    ...
  performance: {
    hints: "warning", // 枚举
    maxAssetSize: 30000000, // 整数类型（以字节为单位）
    maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");
    }
  }
    ...
};

生产模式下打包生成的dist文件下会进行压缩

可以在package.json中配置指令

    "scripts": {
        "start": "npm run dev",
        "dev": "webpack serve --config ./config/webpack.dev.js",
        "build": "webpack --config ./config/webpack.prod.js"
    },

运行配置指令时：start指令直接 npm start即可 dev和build都需加run 即：npm run dev 和 npm run build

css处理---提取css成单独文件

css文件目前被打包到js文件中，当js文件被加载时会创建一个style标签来生成样式，但这对于网站来说会出现闪屏现象，用户体验不好，单独提取传输时文件，通过link标签加载性能才好

在官方文档Plugin中找到MiniCssExtractPlugin跟随文档使用

安装插件

npm install --save-dev mini-css-extract-plugin

在生产文件中引入插件

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

将先前配置好的加载器中所有用到style-loader的地方都修改为MiniCssExtractPlugin.loader

注：MiniCssExtractPlugin.loader不是字符串，不需要引号

    {
        test: /\.css$/i, //只检测.css文件
        use: [
            //执行顺序，从右到左（从下到上）
            MiniCssExtractPlugin.loader, //提取css成单独文件
            "css-loader", //将css资源编译成commonjs的模块到js中
        ]
    },

最后插件还需要new调用并指定存储位置

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

css兼容性处理

下载依赖包

npm i postcss-loader postcss postcss-preset-env -D

将每一个css-loader后面插入一段代码（中间不能有其他代码）

     'css-loader',
     {
         loader: 'postcss-loader',
         options: {
             postcssOptions: {
                 plugins: [
                     'postcss-preset-env', //能解决大多数样式兼容问题
                 ]
             }
         }
     },

然后再在package.json文件中输入兼容条件

    "browserslist": [
        "last 2 version",------该浏览器最近的两个版本
        "> 1%",-------99%的浏览器
        "not dead"------没有死的浏览器
    ]

封装样式loader函数----将重复的loader内容通过函数封装调用即可

function getStyleLoader(pre) {
    return [
            MiniCssExtractPlugin.loader, //提取css成单独文件
            "css-loader", //将css资源编译成commonjs的模块到js中
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            'postcss-preset-env', //能解决大多数样式兼容问题
                        ]
                    }
                }
            },
            pre,
        ].filter(Boolean) //当没有参数传入时，pre为undefined，通过filter函数将其过滤
}

css压缩

安装插件

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

引入插件

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

将插件new并调用

new MiniCssExtractPlugin()

html、js压缩

开启生产模式就默认压缩了，无需额外配置

webpack基础总结

1、两种开发模式

开发模式：代码能编译自动化运行

生产模式：代码编译优化输出

2、webpack基本功能

开发模式：可以编译ES Module 语法

生产模式：可以编译ES Module 语法，压缩js代码

3、webpack配置文件

五个核心概念

entry（入口）

output（输出）

loader（加载器）

plugins（插件）

mode（模式）

devServer配置

4、webpack脚本指令用法

webpack直接打包输出

webpack 启动开发服务器，内存编译打包没有输出