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

构建Webpack知识体系

Webpack

前端项目是由一些.jpg,.js,.jsx,.ts,.css,.less等资源构成。

在打包工具还未出现之前，都是手动来管理这些资源，在页面文件中link、src来调用这些文件。当代码文件之间存在依赖关系时，必须严格按照依赖顺序写。

在旧时代，开发与生成环境一致，难以接入TS或JS新特性。比较难接入Less、Sass等工具。JS、图片、CSS资源管理模型不一致。

为了解决上述的问题，就出现了很多工程化工具，Webpack本质上就是一种前端资源编译、打包工具。

核心流程

使用Webpack

使用Webpack主要依靠其配置，这些配置大致分为两类：

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

基本使用

1.声明入口entry

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

2.声明产物出口output

const path=require('path')

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

3.运行npx webpack

处理CSS

1.安装Loader

npm add -D css-loader style-loader

2.在module.exports中添加module处理css文件

module:{
    rules:[{
        test:/\.css$/i,
        use:[
            "style-loader",
            "css-loader",
        ]
    }],
}

接入Babel

Babel是一个编译器，针对JS，将es6+语法转化为浏览器兼容的语法。

1.安装依赖

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

2.编写配置文件

const path=require('path')

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

3.执行npx webpack

生成HTML

1.安装依赖

npm i -D html-webpack-plugin

2.编写配置文件

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

HMR

Hot Module Replacement ————模块热替换，修改代码后实时显示在页面上，不需要刷新或重启。

1.开启HMR

module.exports={
    //...
    devServer:{
        hot:true
    }
}

2.启动Webpack

npx webpack serve

Tree-Shaking

用于删除一些没有用到，或执行结果不会被用到，或只读不写的代码。

在module.exports中加入：

mode:"production",
optimization:{
    usedExports:true,
}

Loader

简单来讲，Loader就是将非标准JS资源，如CSS、图片资源等翻译为标准JS。

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标签

Webpack 知识体系 | 青训营笔记