关于webpack 一、

张张aaaa
51 阅读4分钟

学习webpack首先了解一下webpack的五大核心概念：

/*
webpack五大核心概念
1、entry（入口）
    提示webpack从那个文件开始打包
2、output（输出）
    提示微webpack打包的输出，输出到哪里，输出的文件名是什么
3、loader（加载器）
    webpack本身只能处理js，json等资源其他资源只能借助loader，webpack才可以解析；
4、plugins（插件）
    拓展webpack的功能
5、mode（模式）
    主要是两种模式：
        开发模式：development
        生产模式: production
*/

webpack.config.js

module.export= {
    //入口
    entry:'/src/main.js',//使用相对路径
    //输出
    output:{
        // 文件的输出路径
        // __dirname  node.js 的变量，  代表当前文件夹的目录
        path:path.resolve(__dirname,'dist'),//绝对路径
        // 文件名
        filename:'static/js/main.js',//想要进行打包代码分开存储 类似与/js/main.js即可将main.js打包到dist/js/文件夹下
        //设置自动将webpack每次打包时，dist文件夹清空再打包
        // 原理：在打包前将path整个目录清空，再打包
        clean:true,
    },
    //加载器
    module:{
        rule:[
            //loader 的配置
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        //eslint
        new ESlintPlugin({
            // 检测那些文件  检测src下的文件
            context:path.resolve(__dirname,'src')
        })
    ],
    // 模式
    mode:'development',

}

//注：需要打包的文件需要在main.js中引入

开发模式介绍

顾名思义，就是开发时使用的模式；
在这个模式中，我们主要做两件事：
1、编译代码，使浏览器能够识别运行，开发时有样式资源（css），字体资源（font），图片资源，html等等，webpack默认都不能处理这些资源，所以我们需要去加载配置去编译这些代码；
2、代码质量检查，规定代码规范，提前检查代码的一些隐患，检查代码规范和格式，统一代码风格（比如eslint）；

处理样式资源

简单来说就是对css、less、sass、scss等代码的处理。
这里就要用到各种相对应的css loader；
[webpack中文文档](babel-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com))

处理Css资源

  1. npm i css-loader style-loader -D
    下载css-loader styly-loader

2、功能介绍 css-loader：负责Css文件编译成webpack能识别的模块

style-loader：回动态创建一个style标签，里面放置webpack中Css模块内容；
此时样式就会以style标签的形式在页面上生效；
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

配置项

名称类型默认值描述
url{Boolean/Function}true启用/禁用 url()/image-set() 函数处理
import{Boolean/Function}true启用/禁用 @import 规则进行处理
modules{Boolean/String/Object}{auto: true}启用/禁用 CSS 模块及其配置
sourceMap{Boolean}compiler.devtool启用/禁用生成 SourceMap
importLoaders{Number}0启用/禁用或者设置在 css-loader 前应用的 loader 数量
esModule{Boolean}true使用 ES 模块语法
exportType{'array' / 'string' / 'css-style-sheet'}array允许导出样式为模块数组、字符串或者 可构造样式（即 CSSStyleSheet）
//加载器
    module:{
        rule:[
            //loader 的配置
            {
                test: /\.css$/,  //正则 只匹配检测css文件
                use: [
                    //执行顺序 从右到左  或者从下到上
                    "style-loader",//通过经js中的css文件创建style标签的形式显示在页面上  （添加到html中）
                    "css-loader"//将css资源编译成commonJs的模块到js中
                ],
            },
            {
                test: /\.less$/,
                // loader:xxx  只能使用一个loader
                use:[
                    //可以使用多个loader
                    "style-loader",
                    "css-loader",
                    "less-loader",//将less文件编译成css文件
                ]
            },
            {
                test: /\.s[ca]ss$/,  //[ca]  代表  scss  或者 sass  都可以  两种写法
                // loader:xxx  只能使用一个loader
                use:[
                    //可以使用多个loader
                    "style-loader",
                    "css-loader",
                    "sass-loader",//将sass文件编译成css文件
                ]
            }
            
            //stylus的配置在这里就不在写了，想了解的可以去webpack中文文档查看
        ],
    },

处理图片资源

在过去webpack4的时候，我们处理图片资源通过file-loader,url-loader进行处理， 现在webpack5已经将这两个功能内置到webpack里面了，我们只需要进行简单的配置，就可以进行图片资源处理了；

    {
    //进行图片资源处理打包
       test: /\.(png|jpg?g|gif|webp)$/,
       type:'asset',
     },
     {   //对小于多少kb的图片进行base64转换，减少请求数量，优化项目图片加载速度
                // （由于图片转换base64格式以后会变大，大概1/3或者1/4左右，所以只对小图片进行转换例如小于10kb的图片）
        test: /\.(png|jpg?g|gif|webp|svg)$/,
        type:'asset',
        parser:{
            dataUrlCondition:{
                maxsize: 10 * 1024, //10kb
            }
        },

        generator:{
            // 输出的图片名称
            filename:'static/images/[hash:10][ext][query]'//hash文件名 hash:10代表hash值只取十位 ext表示文件后缀，query标识文件携带参数
        }
        // webpack 输出的 data URI，默认是呈现为使用 Base64 算法编码的文件内容。
        // 如果要使用自定义编码算法，则可以指定一个自定义函数来编码文件内容：
        // {
        //     test: /\.svg/,
        //     type: 'asset/inline',
        // generator: {
        //     dataUrl: content => {
        //     content = content.toString();
        //     return svgToMiniDataURI(content);
        //     }
        // }
        // }
    },

处理其他资源

    {
        test: /\.(ttf|woff2?)$/,//font字体  icon图标   打包  （阿里巴巴矢量图标库） map3|map4|avi视频格式文件 
        type:'asset/resource',  //resource 类似与file-loader  会将文件原封不动的输出 不会被转成base64格式 
        generator:{
          fliename:'static/media/[hash:10][ext][query]',
        },
    }

处理js资源

由于webpack对于js的处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能在ie等浏览器上运行，所以我们需要做一些兼容性处理，另外，开发中团队对于代码是有严格要求的，我们不可能都去用肉眼去检测代码格式，所以需要专业的工具去进行代码检测；

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

eslint

可组装的js、jsx的检查工具；使用eslint关键是写eslint配置文件，写入rules规则，将来运行eslint时就会以写的规则去对代码进行校验检查；
详细相关配置有兴趣的自行去中文文档进行查阅 --> --> webpack 中文文档 (docschina.org)

.eslint.js

module.exports={
    // 下载包   npm i eslint-webpack-plugin eslint -D
    
    // 继承Eslint规则
    extends:["eslint:recommended"],
    env:{
        node:true,//启用node中全局变量
        browsre:true,//启用浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion: 6,//es6
        sourceType: "module",//es module
    },
    rules:{
        "no-var": 2,//不能使用var定义
    }

}

将不需要eslint检查的可以放到 .eslintignnre 文件中

dist

-------------------------------------分割线---------------------------------------------
后续内容放到下一章

不喜勿喷 谢谢！！！！！！

注：来源bilibili以及webpack文档；

avatar
文章
阅读
粉丝