首页  思维导图  详情



 



webpack

2020-05-18 13:56:39   0  举报





AI智能生成

一步一步手写webpack，基础知识集合，带你轻松入门

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 的正确安装方式

node : node -v, npm -v

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');

path.resolve(__dirname, 'dist')

__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]'}

file-loader

placeholder

[ext]

[name]

[hash]

url-loader

图片被打成了base64

不需要再引用

但是图片很大的时候会很慢

设置options: { limit: 2048}

使用loader打包静态资源（样式篇上）

style-loader

会把style挂到head标签里面

css-loader

分析css的关系，生成一个css

sass-loader node-sass

两个都需要

loader的执行顺序：从后往前

先把scss编译成css,再生成style，插入head

postcss-loader

自动添加样式前缀

需要文件: postcss.config.js

结合一个插件： autoprefixer

webpack4下面这个插件会失效，需要设置browserslist

使用loader打包静态资源（样式篇下）

保证@import 进来的css 也能走postcss-loader scss-loader

需要修改css-loader

css 模块化

{ loader: 'css-loader', options: { importLoaders: 2, modules: true } },

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的基本配置

entry

字符串

默认打包生成的是main.js

如果对多个js都打包成bundle.js会报错

output改成占位符的写法: '[name].js'

这里的name对应entry里面的{key: value} 的key

output

publicPath

打包的js的域名

作业：配置->output

sourceMap的配置

mode: developemnet  -> sourcemap默认开着, 如果页面报错可以找到

devtool: 'none'

devtool: 'source-map'

映射

速度会变慢

会生成map.js

inline-source-map

map.js会以base64的形式放到打包的js里面

cheap

只告诉在第几行

打包效率会提升

只管业务代码的错误，不管loader

module

也管loader的错误

eval

执行效率最快，打包最快，但是复杂提示可能不全面

开发环境推荐：cheap-module-eval-source-map

使用WebpackDevServer提升开发效率

--watch:  不需要重新打包

webpack-dev-server

起了服务器localhost访问

自动打包

自动刷新页面

发送ajax请求页面必须是http开头的

设置

contentBase

open

自动打开

proxy

代理

port

端口号

自己做一个derSerser

express 起一个服务器，listen一个端口号

webpack-dev-middleware

compiler: 编译器

打包的东西放在内存里

Hot-Module-Replacement

希望改变代码之后，devServer不要刷新页面

devServer配置

hot:true, hotOnly: true

如果只改了css就只替换css，页面元素不会做任何变更

new webpack.HotModuleReplacementPlugin()

实现hmr方法

css-loader跟vue-loader内置了这种实现，所以不需要

作业:指南-> 热更新->nodeAPI

使用babel处理es6语法

babel官网

设置

webpack

npm install --save-dev babel-loader @babel/core

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

npm install @babel/preset-env --save-dev

es6->es5语法的转发

npm install --save @babel/polyfill

新的对象，函数

会污染全局环境

按需引入 useBuiltIns: 'usage'

@babel/plugin-transform-runtime

库代码打包

配置

只针对js中需要转换的才转换,useBuiltIns

.babelrc

options

学习总结

概念

基础的概念

entry

output

loader

plugin

模块

指南

解决某一个方向的问题

code spliting

懒加载

typescript

tree shaking

配置

API

如何写loader

写plugin

loaders

plugins

四、webpack的高级概念

tree shakding 详解

把一个模块里面不用的东西都摇掉

只支持ES Module(import)

development 模式默认是不支持tree shaking的

配置

config

package.json

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

1个很大的js, 2Mb

2个1Mb的js

修改了其中一个js，另外一个有缓存

代码分割

异步加载的自动分割

import('lodash')

同步加载

配置

配置名字

配置

使用魔法注释：  import(/* webpackChunksName:lodash */'lodash').then(...);

splitChunks配置

cacheGroup: 缓存组

Lazyloading 懒加载，chunk到底是什么

import('test.js').then()->异步加载进来的js会懒加载

chunks就是打包之后生成的js

打包分析，preloading, prefetching

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

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等引入

library: 'library',

挂载在全局

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

webpack性能优化

提升Webpack的打包速度的方法

1.跟上技术的迭代:node, npm, yarn

2.在尽可能少的模块上使用loader

exclude: /node_modules/,

include: path.resolve(__dirname, '../src')

3.plugin尽可能精简并确保可靠

4.resolve参数合理配置

extensions

['.js', '.vue']

可以省略后缀

mainFiles: 文件夹下面的引入文件

['index', 'child']

默认是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脚手架工具配置分析

 Collect

Get Started

Webpack原理与实践

 Collect

Get Started

webpack

 Collect

Get Started

Webpack HMR

 Collect

Get Started

webpack





0 条评论

下一页