webpack
2020-05-18 13:56:39 0 举报AI智能生成
为你推荐
查看更多
一步一步手写webpack，基础知识集合，带你轻松入门
作者其他创作
大纲/内容
一
require 是commonJS的语法，都可改成import es6语法（ES module）
es6: 需要export default 到导出，才能import引入
commonJs: require 对应 module.exports = xx;
linux命令
cd Desktop
touch index.html : touch 新建一个文件
mkdir dd: mkdir 新建一个文件夹
编程思想
面向过程
面向对象
二、webpack 初探
webpack究竟是什么
一个页面引用多个js会很多http请求，影响页面加载速度
页面只引用一个js
什么是模块打包工具
webpack is a module bundler(webpack是一个模块打包工具)
可以识别任何一种模块引用的语法
课后作业：概念->模块；API ->Modules
Webpack 的正确安装方式
npm init
npm init -y: 可以直接生成配置
全局安装不推荐(两个项目用的不一样的webpack版本)：npm install webpack webpack-cli -g
卸载：npm uninstall webpack webpack-cli -g
在项目里面安装：npm install webpack webpack -D
webpack -v：找不到，因为没有安装到全局
npx webpack -v，可以找到，npx是npm的提供的，在当前项目里面找webpack
在另外项目安装其他版本号的webpack
npm info webpack : 查看webpack有哪些版本
安装对应的版本号：npm install webpack@3.12.0 webpack-cli -D
使用webpack的配置文件
打包图片
地址引用
配置文件：webpack.config.js
配置怎么写
npx webpack index.js： 入口文件是index.js
npx webpack： 没有写entry的话会报错
mode 默认是 'production'
entry
output
filename
path
var path = require('path');
__dirname: 当前所在的路径
package.json
指定配置文件(--config)
npx webpack --config webpackconfig.js
scripts
npm run ...
scripts里面的命令会优先找NodeModules里找webpack
3种运行webpack的方式
global
webpack index.js
local
npx webpack index.js
npm scripts
npm run bundle
webpack
webpack-cli使得我们可以运行webpack命令
浅析 Webpack 打包输出内容
Hash
version
time
打包结果
Assets
Size
chunks: 是js 的 id
chunks name
三、webpack 的核心概念
什么是loader
webpack只认识js结尾的文件
module
rules
test: /\\.(jpg|png|gif)$/g
use: 'file-loader'
file-loader
vue-loader
使用loader打包静态资源(图片篇)
图片打包出来的name不要变化
rules里面的use，添加options: {name: '[name].[ext]'}
placeholder
[ext]
[name]
[hash]
url-loader
图片被打成了base64
不需要再引用
但是图片很大的时候会很慢
设置options: { limit: 2048}
使用loader打包静态资源（样式篇 上）
style-loader
会把style挂到head标签里面
css-loader
分析css的关系，生成一个css
sass-loader node-sass
两个都需要
loader的执行顺序：从后往前
postcss-loader
自动添加样式前缀
需要文件: postcss.config.js
结合 一个插件： autoprefixer
webpack4下面这个插件会失效，需要设置browserslist
使用loader打包静态资源（样式篇 下）
保证@import 进来的css 也能走postcss-loader scss-loader
需要修改css-loader
css 模块化
aa.classList.add(style.avarar)
@import style from './avatar.scss'
iconfont.cn
file-loader（这种只是移动到dist目录）
课后作业：文档->指南，loaders->css-loader; sass-loader; style-loader; postcss-loader
使用plugins让打包更快捷
引入插件
html-webpack-plugin
会在打包结束后自动生成一个html文件，并把打包生成的js自动引入到html中
template
可以配置模板，打包之后js注入真的个模板中
写法
clean-webpack-plugin
每次打包前删除dist目录
new CleanWebpackPlugin(['dist])
webpack4的用法不一样
entry与outpou的基本配置
字符串
默认打包生成的是main.js
如果对多个js都打包成bundle.js会报错
output改成占位符的写法: '[name].js'
这里的name对应entry里面的{key: value} 的key
publicPath
打包的js的域名
作业：配置->output
sourceMap的配置
devtool: 'none'
devtool: 'source-map'
映射
速度会变慢
会生成map.js
inline-source-map
map.js会以base64的形式放到打包的js里面
cheap
只告诉在第几行
打包效率会提升
只管业务代码的错误，不管loader
也管loader的错误
eval
执行效率最快，打包最快，但是复杂提示可能不全面
开发环境推荐：cheap-module-eval-source-map
使用WebpackDevServer提升开发效率
--watch: 不需要重新打包
webpack-dev-server
起了服务器localhost访问
自动打包
自动刷新页面
发送ajax请求页面必须是http开头的
设置
contentBase
open
自动打开
proxy
代理
port
端口号
自己做一个derSerser
1. 在node中运行webpack;2. 在命令行中运行;
express 起一个服务器，listen一个端口号
webpack-dev-middleware
compiler: 编译器
打包的东西放在内存里
Hot-Module-Replacement
希望改变代码之后，devServer不要刷新页面
devServer配置
如果只改了css就只替换css，页面元素不会做任何变更
new webpack.HotModuleReplacementPlugin()
实现hmr方法
css-loader跟vue-loader内置了这种实现，所以不需要
作业:指南-> 热更新->nodeAPI
使用babel处理es6语法
babel官网
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
es6->es5语法的转发
npm install --save @babel/polyfill
新的对象，函数
会污染全局环境
按需引入 useBuiltIns: 'usage'
@babel/plugin-transform-runtime
库代码打包
配置
.babelrc
options
学习总结
概念
基础的概念
loader
plugin
模块
指南
解决某一个方向的问题
code spliting
懒加载
typescript
tree shaking
API
如何写loader
写plugin
loaders
plugins
四、webpack的高级概念
tree shakding 详解
把一个模块里面不用的东西都摇掉
只支持ES Module(import)
development 模式默认是不支持tree shaking的
development 即使配置了treeshaking 代码依旧在，为了开发环境调试，但是知道哪个被使用了
config
production模式默认就开启了tree shaking，不需要添加配置
development 和 production 模式的区分打包
source-map
代码压缩
webpack.dev.js
webpack-dev-server --config webpack.dev.js
npm run dev
webpack.product.js
webpack --config webpack.product.js
npm run build
webpack.common.js
抽取公共的部分
npm i webpack-merge -D
webpack和codesplitting
2个1Mb的js
修改了其中一个js，另外一个有缓存
代码分割
异步加载的自动分割
import('lodash')
同步加载
配置名字
使用魔法注释： import(/* webpackChunksName:lodash */'lodash').then(...);
splitChunks配置
cacheGroup: 缓存组
Lazyloading 懒加载，chunk到底是什么
import('test.js').then()->异步加载进来的js会懒加载
chunks就是打包之后生成的js
analyse
webpack --profile --json > stats.json
指南->代码分离->bundle分析
webpack-bundle-analyzer:
preload
command + shift + p
show covage
点击圆点
刷新页面
代码的使用率
缓存提高的性能很有限
prefetch
import('/* webpackPrefetch: true */ ./click.js')
会在网络空闲的时候加载click.js
css 代码的分割
css in js: 打包不会生成css
mini-css-extrac-plugin
概要
output的filename 跟chunkfilename
这个插件只能运行在线上，因为不支持hmr
package.json 里面修改 sideEffects不对css使用tree shaking
optimize-css-assets-webpack-plugin对css代码压缩打包
webpack 与 浏览器缓存（caching）
[contenthash]
实现了某个js变更了，用户再次访问链接地址变化了，解决了缓存的问题
shiming
案例一
在webpack里模块里面的变量只能在一个模块里面被使用
案例二
修改组件的this指向，都是指向组件，指向到window
npm i imports-loader -D
增加loader: 'imports-loader?this=>window'
环境变量的使用方法
webpack --env.production
五、webpack实战配置案例讲解
Library的打包
library的写法
export default {}
libraryTarget: 'umd'
可以commonjs等引入
挂载在全局
externals:['lodash']
lodash不会被打包
把库发布到npm
\"main\": \"./dist/library.js\"
别人使用的js
PWA 的打包
本地如何起一个服务器
npm i http-server -D
\"start\": \"http-server dist\"
断网之后页面仍旧可以访问
npm i workbox-webpack-plugin -D
配置在生产环境
业务代码
Typescript的打包配置
npm i ts-loader typescript -D
tsconfig.json
npm i @types/lodash -D
识别loadash的函数错误
使用webpackDevServer实现请求转发
npm i axios -D
devServer请求转发配置
eslint在webpack中的配置
npm i eslint -D
npm i eslint-loader -D
npx eslint --init => 快速生成配置文件
使用eslint检查src目录下面：npx eslint src
eslint、.eslintrc.js、eslint-loader、 devServer的overlay配置成true
可以在蒙层提示错误
webpack性能优化
提升Webpack的打包速度的方法
2.在尽可能少的模块上使用loader
3.plugin尽可能精简并确保可靠
4.resolve参数合理配置
extensions
可以省略后缀
mainFiles: 文件夹下面的引入文件
默认是index
alias: 别名
5.使用DllPlugin提高打包速度
webpack.dll.js
打包第三方的所有代码
6.控制包文件大小
结合stats分析打包结果
多页面打包配置
六、 webpack底层原理及脚手架工具分析
如何编写一个loader
一个Loader其实就是一个function
异常捕获
多语言
源代码需要进行一些包装
如何编写一个plugin
插件一个具有apply方法的class
所以使用的时候需要new 以下
constructor里面的options可以获取参数
apply方法的参数是compiler
compiler可以看做是webpack的一个实例
compiler.hooks
emit
打包往dist目录
done
打包完成
beforeComiple
compile
同步
debug
bundler源码编写
模块分析
fs.readFileSync
抽象语法树
babel.parser
解析成浏览器能运行的代码
七、 Create-React-App 和 Vue-cli 3.0脚手架工具配置分析
0 条评论
回复 删除
下一页
