webpack ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第14天一、本堂课重点内容：本堂课主要介绍了

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

一、本堂课重点内容：

本堂课主要介绍了webpack打包核心流程，loader组件，plugin组件，如何学习webpack等等。

二、详细知识点介绍：

前端管理资源时

依赖手工，比如有50个JS文件...操作，过程繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难接入Less、Sass等工具
JS、图片、CSs资源管理模型不一致

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

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

webpack流程

入口处理
从'entry'文件开始,启动编译流程
输入:'entry','context'
依赖解析
从'entry'文件开始，根据'require'or'import'等语句找到依赖资源
模块解析：'resolve','externals'
资源解析
根据'module'配置,调用资源转移器，将png.css等非标准JS资源转译为JS内容
模块转译:'module'
资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
后处理:'optimization','mode','target'

模块化+一致性

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

使用webpack

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

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

其他工具

缓存
Sourcemap
性能监控
日志
代码压缩
分包

loader

为了处理非标准JS资源,设计出资源翻译模块—— Loader

用于将资源翻译为标准JS

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

特点：

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

插件

插件架构精髓:对扩展开放,对修改封闭

钩子的核心信息:

时机:编译过程的特定节点,Webpack 会以钩子形式通知插件此刻正在发生什么事情;
上下文:通过tapable提供的回调机制,以参数方式传递上下文信息;
交互:在上下文参数对象中附带了很多存在side effect的交互接口,插件可以通过这些接口改变

学习webpack

入门应用

理解打包流程
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack环境
掌握常见脚手架工具的用法,例如:Vue-cli、create-react-app、@angular/cli

进阶

理解Loader、Plugin机制，能够自行开发Webpack组件
理解常见性能优化手段，并能用于解决实际问题
理解前端工程化概念与生态现状

大师级

阅读源码，理解Webpack编译、打包原理，甚至能够参与共建

三、实践练习例子：

使用webpack

安装

npm i -D webpack webpack-cli

编辑webpack.config.js

const path = require('path')

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

entry是入口文件，output是输出的文件

执行编译命令

npx webpack

处理css

安装loader

npm add -D css-loader style-loader

添加'module'处理css文件

const path = require('path')

module.exports = {
    entry: './src/index',
    mode: "development",
    devtool: false,
    output:{
        filename: '[name].js',
        path: path.join(__dirname,'./dist')
    },
    module:{
        rules:[{
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    }
}

接入babel

安装依赖

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

配置

module: {
        rules:[{
            test: /\.js$/,
            use:[{
                loader:'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env']
                    ]
                }
            }]
        }]
    }

生成HTML

安装

npm i -D html-webpack-plugin

配置

const HTMLWebpackPlugin = require('html-webpack-plugin')
plugin:[new HTMLWebpackPlugin()]

HMR 模块热替换

安装

npm install -D webpack-dev-server

配置

devServer: {
    hot: true,
    open: true
},
watch: true

启动

npx webpack serve

tree-shaking

树摇，用于删除dead code

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

debug

在js中加入debugger;

之后运行ndb npx webpack可以debug

loader

loaderjs一般包含

module.exports = function( source,sourceMap? , data? ) { 
    // source 为 loader 的输入
    //可能是文件内容，也可能是上一个 loader处理结果
    return source;
};

四、参考：

官网：webpack.js.org/configurati…

参考：mp.weixin.qq.com/s/TPWcB4MfV…

github.com/webpack-con…

webpack.js.org/loaders/sty…

babel-loader:webpack.js.org/loaders/bab…

babel官网：babeljs.io/

babeljs.io/docs/en/bab…

HTML:webpack.js.org/plugins/htm…

HMR：mp.weixin.qq.com/s/cbYMpuc4h…

深入浅出webpackwebpack.wuhaolin.cn/

awesome-webpackgithub.com/Tecvan-fe/a…

survivejssurvivejs.com/webpack/pre…

插件mp.weixin.qq.com/s/tXkGx6Ckt…

webpack 核心原理mp.weixin.qq.com/s/SbJNbSVzS…

思维导图gitmind.cn/app/doc/fac…

webpack ｜ 青训营笔记

一、本堂课重点内容：

二、详细知识点介绍：

webpack流程

使用webpack

loader

插件

学习webpack

三、实践练习例子：

使用webpack

处理css

接入babel

生成HTML

HMR 模块热替换

tree-shaking

debug

loader

四、参考：

webpack ｜青训营笔记