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

Web知识体系学习记录

什么是Webpack

Webpack本质上是一种前端资源编译、打包工具。支持多份资源文件打包成一个 Bundle ;支持模块化处理CSS、图片等资源文件；支持 HMR+ 开发服务器等等。

Webpack的核心流程

入口处理：从entry文件开始，启动编译流程
依赖解析：从entry文件开始，根据require或者import等语句招待依赖资源
资源解析：根据module配置，调用资源转移器，将png、css等非标准 JS 资源转译为 JS 内容
资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
递归调用2、3，知道所有资源处理完毕

Webpack的模块化和一致性

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

使用Webpack

使用Webpack的大致流程

01. 安装Webpack

npm i -D webpack webpack-cli

02. 编辑配置文件

//webpack.config.js
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

Webpack的使用方法

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

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

处理CSS

首先，index.js 和 index.css在同一个文件夹中，那么 index.js 的代码如下：

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

那么第一步是需要安装 Loader，使用npm add -D css-loader style-loader命令进行安装。然后在webpack.config.js配置文件中添加module处理 CSS 文件。

const path = require("path");

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

接入Babel

index.js文件代码如下：

    class Person{
        constructor(){
            this.name = 'Tecvan'
        }
    }
    console.log((new Person()).name)
    const say = () =>{}

然后，通过npm i -D @babel/core @babel/preset-env babel-loader命令来安装依赖，然后声明产物出口output，实现如下：

const path = require("path")
module.export  = {
    entry: "./src/index";
    output:{
        filename: "[name].js",
        path: path.join(__dirname,"./dist"),
    },
    module:{
        rule: [{
            test:/\.js?$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    loader: 'babel-loader',
                    options:{
                        presets:[
                            [
                                '@babel/preset-env'
                            ]
                        ]
                    }
                },]
        }],
    },
};

最后执行npx webpack完成接入。

Web知识体系学习记录｜青训营笔记