Webpack5基础1

本文是Webpack系列第一篇，主要学习Webpack5基础 首发公众号：失业前端碎碎念，webpack5基础1

五大核心概念

entry（入口）：webpack从哪个文件开始打包

output（输出）：webpack打包完的文件输出到哪里去，如何命名等

loader（加载器）：webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析

plugins（插件）：扩展webpack的功能

mode（模式）：development和production两种模式

基本配置

根路径下webpack.config.js，例子🌰

const path = require("path");

module.exports = {  // 入口
    entry: "./src/main.js",  // 输出
    output: {
        path: path.resolve(__dirname, "dist"), 
        filename: "main.js",  }, 
        // 加载器 loader 
        module: {  
            rules: [], 
        }, 
        // plugin 插件
        plugins: [],  
        // 模式 
        mode: "development",
};

开发者模式

1. 编译代码，让浏览器能识别运行

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

处理样式资源

css

// 下载包
npm i -D css-loader style-loader

css-loader：负责将css文件编译成webpack能识别的模块

style-loader：会动态创建一个style标签，里面放置webpack中css模块

配置

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

less

npm i -D less-loader

less-loader：将less编译成css文件

配置

{  
    test: /.less/, // 只检测.css文件   
    // loader: 'xx' 只能使用一个loader 
    use: [   
        "style-loader",    
         "css-loader",   
         "less-loader", // 将less编译成css 
         ],
},

scss/sass

npm i -D sass-loader sass

sass-loader：将sass编译成css文件
配置

{ 
    test: /.s[ac]ss$/, 
    use: [
        "style-loader",
        "css-loader",  
        "sass-loader", // 将sass编译成css文件 
    ],
},

stylus

npm i -D stylus-loader

stylus-loader：将styl编译成css文件
配置

{ 
    test: /.s[ac]ss$/,
    use: [  
        "style-loader", 
        "css-loader",  
        "sass-loader", // 将sass编译成css文件 
    ],
},

图片资源
webpack4处理图片通过file-loader（将资源原封不动输出，过程中会编译成webpack能识别的资源）和url-loader（在file-loader基础上，将资源进行优化，小于某个大小的图片转base64）webpack5已经将两个loader内置，只需配置开启配置

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

修改输出资源的路径修改js打包输出路径

修改图片打包输出路径

自动清空上次打包内容
webpack4 使用插件clear-webpack-plugin
webpack5只需加简单配置

/ End感谢阅读，如果觉得有用，点个赞、关注、在看