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

一、本堂课重点内容：

理解webpack的基本用法，通过Webpack功能、Loader与Plugin组件设计，建立一个知识体系。

二、详细知识点介绍：

1.什么是webpack

webpack就是一个工程化工具，本质上是一种前端资源编译、打包工具，在前端众多打包工具中webpack是目前用的最多的，

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

2.使用webpack

安装示例

安装：npm i -D webpack webpack-cli
编辑配置文件
执行编译命令：npx webpack\

如何使用

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

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

真实案例

使用Webpack处理CSS

安装loader：npm i -D css-loader style-loader
添加“module”处理css文件，webpack.config.js文件下

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

使用Webpack-接入Babel

安装依赖：npm i -D @babel/core @babel/preset-env babel-loader
声明产物出口“output”

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

执行“npx webpack”

3.理解Loader

为了处理非标准JS资源，设计出资源翻译模块--Loader 用于将资源翻译为标准JS 它的使用就和使用css-loader类似其他特点：链式执行、支持异步执行、分normal、pitch两种模式

4.理解插件

插件就是一些人开发好的功能代码，通过webpack引入这些插件就能方便我们开发，甚至Webpack本身的很多功能也是基于插件实现的，插件的开发是一个特别复杂的过程，其中插件架构精髓就是对扩展开放，对修改封闭。

三、课后个人总结：

通过对本次课程的学习让我webpack有了一定的了解，明白了webpack是如何使用的，通过配置webpack实现对css、js、sass的转化，理解了loader和插件。

四、引用参考

字节内部课程-webpack知识体系

Webpack知识体系|青训营笔记