Webpack基础

一、前言

1.1、为什么需要打包工具？

开发时，我们会使用框架(React,Vue)，ES6模块化语法，Less/Sass等css预处理器等语法进行开发
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、CSS等语法，才能运行
所以我们需要打包工具帮我们做完这些事
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等

1.2、有哪些打包工具？

Grunt,Gulp,Parcel,Webpack...

1.3、基本使用

webpack是一个静态资源打包工具
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去
输出的文件就是编译好的文件，就可以在浏览器端运行了
我们将webpack输出的文件叫做bundle

二、基本使用

2.1、功能介绍

webpack本身功能是有限的：
        开发模式：仅能编译JS中的ES Module语法
        生产模式：能编译JS中的ES Module语法，还能压缩JS代码

2.2、开始使用

1 资源目录
    -webpack_code  #项目根目录(所有指令必须在这个目录运行)
        --src  #项目源码目录
            ---js  #js文件目录
                ----count.js
                ----sum.js
            ---main.js  #项目主文件
2 创建文件
    count.js
        export default function count(x,y){return x-y;}
    sum.js
        export default function sum(...args){return args.reduce((p,c)=>p+c,0);}
    main.js
        import count from "./js/count"
        import sum from "./js/sum"
        console.log(count(2,1))
        console.log(sum(1,2,3,4))
3 下载依赖
    打开终端，来到项目根目录，运行以下指令：
    初始化package.json
    npm init-y
    此时会生成一个基础的package.json文件
    需要注意的是package.json中name字段不能叫做webpack，否则下一步会报错
    下载依赖
    npm i webpack webpack-cli -D
4 启用webpack
    开发模式
    npx webpack ./src/main.js --mode=development
    生产模式
    npx webpack ./src/main.js --mode=production
    npx webpack：是用来运行本地安装webpack包的
    ./src/main.js：指定webpack从main.js文件开始打包，不但会打包，还会将其依赖也一起打包进来
    --mode=xxx：指定模式(环境)
5 观察输出文件
    默认webpack会将文件打包输出到dist目录下，我们查看dist目录下文件情况就好了
小结：
    webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错

三、基本配置

3.1、5大核心概念

1 entry(入口)
        指示webpack从哪个文件开始打包
2 output(输出)
        指示webpack打包完的文件输出到哪里去，如何命名等
3 loader(加载器)
        webpack本身只能处理js,json等资源，其他资源需要借助loader,webpack才能解析
4 plugins(插件)
        拓展webpack的功能
5 mode(模式)
        主要由两种模式：开发模式(development)、生产模式(production)

3.2、准备webpack配置文件

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

四、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式
这个模式下我们主要做两件事：
1 编译代码，便浏览器能识别运行
开发时我们有样式资源、字体资源、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源
2 代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观

五、处理样式资源

5.1、介绍

webpack本身是不能识别样式资源的，所以我们需要借助loader来帮助webpack解析样式资源
我们找loader都应该去官方文档中找到对应的loader，然后使用

5.2、处理CSS资源

1 下载包
npm i css-loader style-loader -D
注意：需要下载两个loader
2 功能介绍
css-loader：负责将CSS文件编译成webpack能识别的模块
style-loader：会动态创建一个style标签，里面放置webpack中css模块内容
此时样式就会以style标签的形式在页面上生效
3 配置
webpack.config.js
module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/,  // 只检查.css文件
                use: [
                    // 执行顺序，从右到左(从上到下)
                    "style-loader", // 将js中css通过创建style标签添加html文件中生效
                    "css-loader",   // 将css资源编译成commonjs模块到js中
                ],
            }
        ],
    },
main.js
import "./css/index.css"

5.3、处理Less资源

1 下载包
npm i less-loader -D
2 功能介绍
less-loader：负责将less文件编译成css文件
3 配置
webpack.config.js
module: {
    rules: [
        // loader的配置
        {
            test: /\.less$/,
            // loader:'xxx',  // 只能使用1个loader
            use: [
                // 使用多个loader
                "style-loader",
                "css-loader",
                "less-loader",  // 将less编译成css文件
            ],
        }
    ],
},
main.js
import "./less/index.less"

5.4、处理Sass和Scss资源

1 下载包
npm i sass-loader sass -D
注意：需要下载两个
2 功能介绍
sass-loader：负责将sass文件编译成css文件
sass：sass-loader依赖sass进行编译
3 配置
webpack.config.js
module: {
    rules: [
        // loader的配置
        {
            test: /\.s[ac]ss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader",  // 将sass编译成css文件
            ],
        }
    ],
},
main.js
import "./sass/index.sass"
import "./sass/index.scss"

5.5、处理styl资源

1 下载包
npm i stylus-loader -D
2 功能介绍
stylus-loader：负责将styl文件编译成css
3 配置
webpack.config.js
module: {
    rules: [
        // loader的配置
        {
            test: /\.styl$/,
            use: [
                "style-loader",
                "css-loader",
                "stylus-loader",  // 将stylus编译成css文件
            ],
        },
    ],
},
main.js
import "./stylus/index.styl"

六、处理图片资源

过去在webpack4时，我们处理图片资源通过file-loader和url-loader进行处理
现在webpack5已经将两个loader功能内置到webpack里了，我们只需要简单配置即可处理图片资源
1 配置
webpack.config.js
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
                dateUrlCondition: {
                    // 小于10kb的图片转base64
                    // 优点：减少请求数量 缺点：体积会更大
                    maxSize: 10 * 1024,    // 10kb
                }
            }
        }
    ],
},

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

webpack.config.js
output: {
    // 所有文件的输出路径
    // __dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"),    // 绝对路径
    // 入口文件打包输出文件名
    filename: "js/main.js"
},
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
                dateUrlCondition: {
                    // 小于10kb的图片转base64
                    // 优点：减少请求数量 缺点：体积会更大
                    maxSize: 10 * 1024,    // 10kb
                }
            },
            generator: {
                // 输出图片名称
                filename: "static/images/[hash][ext][query]"
            }
        }
    ],
},

八、自动清空上次打包内容

output: {
    // 自动情况上次被打包的内容
    // 原理：在打包前，将path整个目录内容清空，在进行打包
    clean:true,
},

九、处理JS资源

针对js兼容性处理，我们使用Babel来完成
针对代码格式，我们使用Eslint来完成

9.1、Eslint

可组装的JavaScript和JSX检查工具
它是用来检测js和jsx语法的工具，可以配置各项功能

9.2、配置文件

配置文件有很多种写法：
.eslintrc.*：新建文件，位于项目根目录
    .eslintrc
    .eslintrc.js
    .eslintrc.json
    区别在于配置格式不一样
package.json种eslintConfig：不需要创建文件，在原有文件基础上写
ESLint会查找和自动读取它们，所以以上配置文件只需要存在一个即可

9.3、具体配置

.eslintrc.js配置文件：
module.exports = {
    // 解析选项
    parserOptions:{},
    // 具体检查规则
    rules:{},
    // 继承其他规则
    extends:[],
    // ...
    // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/
};
1 parserOptions解析选项
parserOptions:{
    ecmaVersion:6,  // ES语法版本
    sourceType:"module",    // ES模块化
    ecmaFeatures:{  // ES其他特性
        jsx:true    // 如果是React项目，就开启jsx语法
    }
}
2 rules具体规则
off或0关闭规则
warn或1开启规则，使用警告级别的错误：warn(不会导致程序退出)
error或2开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)
rules:{
    semi:"error",   // 禁止使用分号
    'array-callback-return':'warn', // 强制数组方法的回调函数中有return语句，否则警告
    'default-case':[
        'warn', // 要求switch语句中有default分支，否则警告
        {commentPattern:'^no default$'} // 允许在最后注释no default，就不会有警告了
    ],
    eqeqeq:[
        'warn',  // 强制使用===和!==，否则警告
        'smart'  // 除了少数情况下不会有警告
    ],
}
3 extends继承
Eslint官方的规则：eslint:recommended
Vue Cli官方的规则：plugin:vue/essential
React Cli官方的规则：react-app
// 例如在React项目中，我们可以这样写配置
module.exports={
    extends:["react-app"],
    rules:{
        // 我们的规则会覆盖掉react-app的规则
        // 所以想要修改则直接改就是了
        eqeqeq:["warn","smart"]
    },
};

9.4、在webpack中使用

1 下载包
npm i eslint-webpack-plugin eslint -D
2 定义Eslint配置文件
.eslintrc.js
module.exports={
    extends:["eslint:recommended"],
    env:{
        node:true,  // 启用node中全局变量
        browser:true,   // 启用浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion:6,
        sourceType:"module",
    },
    rules:{
        "no-var":2, // 不能使用var定义变量
    },
};
3 修改js文件代码
main.js
plugins: [
    // plugins的配置
    new ESLintWebpackPlugin({
        context:path.resolve(__dirname,"src")
    })
],

9.5、Babel

主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中

9.6、配置文件

babel.config.*：新建文件，位于项目根目录
    babel.config.js
    babel.config.json
.babelrc.*：新建文件，位于项目跟目录
    .babelrc
    .babelrc.js
    .babelrc.json
package.json中babel：不需要创建文件，在原有文件基础上写
Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可

9.7、具体配置

babel.config.js配置文件为例：
module.exports={
    // 预设
    presets:[],
};
1 presets预设
    简单理解：就是一组Babel插件，拓展Babel功能
    @babel/preset-env：一个智能预设，允许您使用最新的JavaScript
    @babel/preset-react：一个用来编译React jsx语法的预设
    @babel/preset-typescript：一个用来编译TypeScript语法的预设

9.8、在webpack中使用
 

1 下载包
npm i babel-loader @babel/core @babel/preset-env -D
2 定义Babel配置文件
webpack.config.js
module: {
    rules: [
        {
            test: /\.js$/,
            exclude:/node_modules/, // 排除node_modules中的js文件(这些文件不处理)
            use: {
              loader:"babel-loader",
              options:{
                  presets:["@babel/preset-env"]
              }
            },
        },
    ],
},

十、处理HTML资源

下载包：
npm i html-webpack-plugin -D
配置文件：
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        // 模板：以public/index.html文件创建新的html文件
        // 新的html文件特点：结构和原来一致，自动引入打包输出的资源
        template:path.resolve(__dirname,"public/index.html")
    })
],

十一、开发服务器&自动化

下载包：
npm i webpack-dev-server -D
配置文件：
webpack.config.js
module.exports = {
    // 开发服务器
    devServer: {
        host: "localhost",   // 启动服务器域名
        port: "3000",    // 启动服务器端口号
        open: true,  // 是否自动打开浏览器
    },
}
运行命令：
npx webpack server

十二、生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线
这个模式下我们主要对代码进行优化，让其运行性能更好
优化主要从两个角度出发：
1 优化代码运行性能
2 优化代码打包速度
生产目录准备：
1 文件目录
webpack-test(项目根目录)
    config(Webpack配置文件目录)
        webpack.dev.js(开发模式配置文件)
        webpack.prod.js(生产模式配置文件)
    node_modules(下载包存放目录)
    src(项目源码目录，除了html其他都在src里面)
    public(项目html文件)
        index.html
    .eslintrc.js(Eslint配置文件)
    babel.config.js(Babel配置文件)
    package.json(包的依赖管理配置文件)

十三、CSS处理

提取CSS成单独文件
CSS文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式
这样对于网站来说，会出现闪屏现象，用户体验不好
我们应该是单独的CSS文件，通过link标签加载性能才好
下载包
npm i mini-css-extract-plugin -D
配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
    new MiniCssExtractPlugin({
        filename: "static/css/main.css"
    })
],
注意：所有 "style-loader"修改为MiniCssExtractPlugin.loader

十四、CSS兼容性处理

下载包
npm i postcss-loader postcss postcss-preset-env -D
配置
webpack.config.js
{
    test: /\.css$/,  // 只检查.css文件
    use: [
        // 执行顺序，从右到左(从上到下)
        MiniCssExtractPlugin.loader, // 将js中css通过创建style标签添加html文件中生效
        "css-loader",   // 将css资源编译成commonjs模块到js中
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env",   // 能解决大多数样式兼容性问题
                    ]
                }
            }
        }
    ],
},
package.json
"browserslist": [
    "ie>=8"
]

十五、CSS压缩

下载包
npm i css-minimizer-webpack-plugin -D
配置
const CssMinimizerPlugin=require('css-minimizer-webpack-plugin')
plugins: [
    new CssMinimizerPlugin()
]

十六、webpack基础总结

1 两种开发模式
        开发模式：代码能编译自动化运行
        生产模式：代码编译优化输出
2 webpack基本功能
        开发模式：可以编译ES Module语法
        生产模式：可以编译ES Module语法，压缩js代码
3 webpack配置文件
        5个核心概念
            entry,output,loader,plugins,mode
        devServer配置
4 webpack脚本指令用法
        webpack直接打包输出
        webpack server启动开发服务器，内存编译打包没有输出