值得你学习的构建工具-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 的过程中,需要熟悉其配置项的编写,以及它的工作流程。

你可能感兴趣的:(构建工具,学习,webpack)