值得你学习的构建工具-Webpack5.0简化版--五大核心概念

一、Webpack 是什么

        简单来说，webpack 就是一个用于现代 JavaScript 应用程序的静态打包工具，

        打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。

        Webpack 5 运行于 Node.js v10.13.0+ 的版本。

二、为什么使用 Webpack

        在以前我们开发一个项目的时候，会出现很多 .css、.js 等类似的文件，而且这些 .js 文件中间存在着依赖关系，这就会产生一定的问题，可以从几个方面讲：

        1.文件大小（体积）

        2.文件数量

        3.传输速度

        4.流行框架（Vue、React等）支持

        毋庸置疑，使用 webpack 能够减少文件的大小（体积），将文件进行压缩，比如 html 的处理（删除空格、注释等等），能够减少文件的数量，使用 webpack 打包工具，能够将很多具有依赖关系的文件打包在一起，注入到模板文件内，随之也能够提升文件传输的速度，

三、Webpack 的五大核心概念

        1.入口文件 - entry

        入口文件表示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

        默认值是 ./src/index.js，但你可以通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。代码如下：

module.exports = {
    entry:"./src/index.js"
}

        2.出口文件 - output

        出口文件 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是  ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

        你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const path = require('paht');

module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
}
}

        3.模式 - mode

        mode 翻译为模式，一共有三个值可以选择: development、production、none。默认值为 production，一般不会设置 none。

        development：一般开发时候使用的模式，也叫开发环境，特点：打包快，文件体积大。

        production：是指项目上线的时候使用的模式，也叫生产模式，特点：打包比较慢，文件体积小。

      代码示例如下：

module.exports = {
    mode:"production"
}

        4.插件 - plugin

        插件能够让 Javascript 执行任务的范围更广泛，比如：注入依赖、打包优化、资源管理等。

        使用方法：首先需要 npm 安装想要使用的插件，然后在 webpack.config.js 中 使用 require （）导入该插件，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。配置代码如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');//将依赖注入到模板文件里面

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
        //模板文件的地址
        template: './src/index.html',
        //打包后的文件名
        filename:"index.html"
    })
  ],
};

        5.数据加载工具 - loader

        webpack 创造以来只能处理 JavaScript 和 JSON 文件，然而 loader的出现 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

       使用方法：使用 loader 之前需要 npm 安装相应的 loader，在 webpack.config.js 中进行配置。

        webpack5.0对图片、字体、音频视频等的 loader做了更新，摈弃了 url-loader、file-loader等，使用内置的配置对这些文件进行处理，配置如下：   

const path = require('path');

module.exports = {
  ...
  module:{
        rules:[
            {
                test: /\.css$/i,  //i 表示不区分大小写
                use:['style-loader','css-loader']
            },
            //图片处理
            //url-loader  file-loader
            {
                test: /\.(png|jpg|gif|svg|bmp|jpeg)$/,
                //------使用webpack5内置的type
                //在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 20 * 1024
                        //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
                        //如果满足条件就转换成 base64格式显示，否则就直接导出文件到下方generator配置的filename的imgs文件夹中去
                    }
                },
                generator: {
                    //geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
                    filename: "images/[name].[hash:6][ext]"  //[name]指原来的名字，[hash:6]取哈希的前六位确保不会重复，[ext]指原来的扩展名
                }
            },
            /* 配置音视频 */
            {
                test: /\.(mp3|mp4)$/,
                //------使用webpack5内置的type
                type: 'asset',//表示导出文件的路径 url
                generator: {
                    //geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
                    //[name]指原来的名字，[hash:6]取哈希的前六位确保不会重复，[ext]指原来的扩展名
                    filename: "video/[name].[hash:6][ext]"
                },
            },
            //配置字体文件
            {
                test: /\.(ttf|eot|svg|woff|woff2|otf)$/,
                //------使用webpack5内置的type
                type: 'asset/resource',//表示导出文件的路径 url
                generator: {
                    //geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
                    //[name]指原来的名字，[hash:6]取哈希的前六位确保不会重复，[ext]指原来的扩展名
                    filename: "fonts/[name].[hash:6][ext]"
                }
            }
        ]
    },
};

四 、总结

        webpack 使用过程中最重要的就是配置项，在学习 webpack 的过程中，需要熟悉其配置项的编写，以及它的工作流程。