这是我参与「第五届青训营 」伴学笔记创作活动的第13天

本节课的主要内容

• 什么是Webpack
• Webpack打包核心流程
• Loader组件
• Plugin组件
• 如何学习webpack

什么是Webpack

• 本质上是一种前端资源编译、打包工具
• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR + 开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap
• ......

为什么要学习Webpack

• 理解前端“工程化”概念、工具、目标
• 提高个人核心竞争力
• 成为高阶前端工程师的必经之路

Webpack的使用

• 01 安装

npm i -D webpack webpack-cli

• 02 编辑配置文件

module.exports = {
    entry:'main.js',
    output:{
        filename:"[name].js",
        path:path.join(__dirname, "./dist"),
    },
    module:[{
        rules:[{
            test:/\.less$/i,
            use:['style-loader', 'css-loader', 'less-loader']
        }]
    }]
}

• 03 执行编译命令

npx webpack

流程类

• 作用于流程中某个or若干个环节，直接影响打包效果的配置项

工具类

• 主流程之外，提供更多工程化能力的配置项

Webpack的核心流程-极度简化版

模块化————一致性

• 多个文件资源和合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript方言
• 同意图片、CSS、字体等其它资源的处理模型
• Etc...

使用Webpack————处理CSS

• 01 安装Loader

npm add -D css-loader style-loader

• 02 添加 module 处理css文件

const path = require('path')

module.exports = {
    entry:"./scr/index",
    output:{
        filename:"[name].js",
        path:path.join(__dirname, "./dist"),
    },
    
    module:{
        // CSS 处理器
        rules:[{
            test:/\.css/i,
            use:[
                "style-loader",
                "css-loader"
            ]
        }]
    }
}

认识Loader:链式调用

module.exports = { module: { reules: [{ test: /\.less$/i, use:[ "style-loader", "css-loader", "less-loader", ] }] } }

• less-loader：实现less => css 的转化
• css-loader：将CSS包装成类似 module.exports = "${css}" 的内容，包装后的内容符合 javascript语法
• style-loader：将css模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签