Webpack知识体系构建 | 青训营笔记

Webpack知识体系构建 | 青训营笔记

这是我参与【第四届青训营】笔记创作活动的第10天

一、什么是Webpack

Webpack本质上是一种前端资源编译、打包工具

• 将多份资源打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR+开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap

使用Webpack

1.安装

npm i -D webpack webpack-cli

2.编辑配置文件

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']
        }]
    }
}

3.执行编译命令

npx webpack

核心流程

关于Webpack的使用方法，基本都围绕”配置“展开，而这些配置大致可划分为两类：

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多的工程化能力的配置项

流程类配置

配置总览

文件结构

1.声明入口entry

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

2.声明产物出口output

webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index",
    output: {
        filename:"[name].js",
        path:path.join(__dirname,"./dist"),
    }
};

处理CSS

index.js

const style = require("./index.css")
import styles from './index.css'

1.安装Loader

npm add -D css-loader style-loader

2.添加module处理css文件

webpack.config.js

const path =require("path");

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

接入Babel

文件结构

index.js

class Person {
    constructor() {
        this.name = 'xx'
    }
}
console.log((new Person()).name)

const say = () => {}

1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口output

3.执行npx webpack

生成HTML

文件结构

1.安装依赖

npm i -D html-webpack-plugin

2.声明产物出口output

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/index",
    output:{
        filename:"[name].js",
        path: path.join(__dirname,"./dist"),
    },
    plugins: [new HtmlWebpackPlugin()]
};

3.执行npx webpack

工具线

二、Loader组件

文件结构

index.js

import styles from './a.less';

1.安装Loader

npm add -D css-loader style-loader less-loader

2.添加module处理css文件

module.exports = {
    module:{
        rules:[
            {
                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标签

特点：

• 链式执行
• 支持异步执行
• 分normal、pitch两种模式

常见Loader