webpack笔记

Webpack

1.静态模块打包工具,将.scss .ts 打包成浏览器识别的文件

2.模块化有 ESModule CommonJS AMD CMD

3.webpack和gulp rollup vite

4.loader处理文件的转换,plugin用于打包优化,资源管理,环境变量注入

5.browserslistrc //筛选浏览器

Loader:

Css-loader

Style-loader

Postcss-loader postcss-preset-env

plugin:

clean-webpack-plugin

html-webpack-plugin

const { DefinePlugin } = require("webpack"); //定义全局变量

copy-webpack-plugin //复制静态文件到打包文件中

5.source-map打包文件会生成一个映射文件,方便运行中出现错误,快速定位出问题代码的位置

inline-\|hidden-\|eval-\]\[nosources-\]\[cheap-\[module-\]\]source-map Inline 会生成source-map以Dateurl添加到bundle文件后面 hidden 会生成source-map 但是删除bundle文件的source-map的引入 eval 会生成source-map 以Dateurl添加到eval函数里 nosources会生成source-map不会生成的source-map的源文件,但是有错误提示 cheap 会生成source-map但是更高效(不会生成列的映射) module 会生成source-map对loader编译后的代码处理更好 开发,测试阶段最好是cheap-module-source-map 发布阶段 不写或false 6.babel是什么?,开发中的ES6和TS浏览器不能识别,所以需要babel帮我们语法转换,源代码转换,Polyfill实现目标缓解的功能。 代码的编译过程 ES6-\>AST-\>bateCode-\>字节码 和postcss一样可以直接使用,postcss src/word.css -o css/demo.css npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions Babel的使用需要配合其他的插件使用 比如转换尖头函数需要使用@babel/plugin-transform-arrow-functions 如果需要插件很多我们就需要使用预设presets,他会根据我们的browserslistrc过滤的浏览器自动适配 presets: \[ @babel/preset-env"

7.polyfill填充物 帮我处理浏览器不兼容的语法糖(promise,generator,symbol),帮我们添加

function promise() {}

使用配合presets

presets: [

"@babel/preset-env", { useBuiltIns: "usage", corejs: "3", }, \], \], 8.ts的打包处理 第一种ts-loader 第二种babel-loader @babel/preset-typescript presets: \[ \[ "@babel/preset-env", { useBuiltIns: "usage", corejs: "3", }, \], \["@babel/preset-typescript"

],

9.vue文件的打包处理

vue-loader

vue-template-compiler

10.ESlint eslint-loader打包的时候校验eslint

11.webpack的 package.json的命令加 ---watch

webpack.config.js 的选项 watch:true

12.webpack-dev-server

是否开启热更新

server:{

hot: true

}

对js文件需要监听变化

if (module.hot) {

module.hot.accept("./js/math.js", () => {

console.log("文件更新了");

});

}

vue文件的vue-loader支持vue组件的HMR

热更新的原理:socket的长链接

13.服务运行优化,这个设置是默认打开

compress是否为静态文件开启gzip

14.跨域代理proxy

15.historyApiFallback 跳转路由子后刷新页面就会404,historyApiFallback会帮我们映射到首页

16.resolve alias地址代理, extensions匹配运行文件的后缀

resolve: {

extensions: [".js", ".json", ".wasm", ".vue", ".ts", ".jsx"],

alias: {

"@": path.resolve(__dirname, "./src")

}

},

  1. 配置文件分离---env 添加环境变量

"build": "webpack --config ./config/webpack.common.js --env production",

"dev": "webpack server --config ./config/webpack.common.js --env development",

module.exports = function (env) {

process.env.production = env.production; // 把环境变量放到node的process

const config = env.production ? prodConfig : devConfig;

const mergeConfig = merge(common, config);

return mergeConfig;

};

18.代码分离

多入口

optimization

splitChunks

runtimeChunk

19.代码的预获取和预加载

Prefetch和preload

/* webpackPrefetch: true */

20.cdn的使用

externals:{

Vue: "vue"

}

21.css的代码打包到文件mini-css-extract-plugin

帮我们把css文件打包到一个文件

22,hash

hash值的生成和整个项目有关系

chunkhash可以有效的解决上面的问题,它会根据不同的入口进行借来解析来生成hash值

contenthash表示生成的文件hash名称,只和内容有关系

23,terser

Terser是一个JavaScript的解释(Parser)、Mangler(绞肉机)/Compressor(压缩机)的工具集;

配置链接:https://github.com/terser/terser#minify-options

24,css的压缩工具css-minimizer-webpack-plugin

25.sideEffects删除引用但是没有使用的代码,一般直接是false

26,CSS的Tree Shaking:PurgeCSS

27,作用域提升webpack已经内置

new webpack.optimize.ModuleConcatenationPlugin()

28,webpack对文件压缩 compression-webpack-plugin

29.InlineChunkHtmlPlugin

将打包好的文件注入到html中,减少http请求

new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime.+[.]js/])

30,自定义loader,就是一个函数,接受content就是文件进行处理,最后通过我们的函数处理

31,loader的执行顺序从后往前,原理:1,2,3存到pitch-loader的时候,从上往下执行,

变成3,2,1,取得时候normer-loader从上往下执行就是先运行3

如何修改loader的执行顺序,通过enforce修改pre,post

32.loader函数同步执行和异步执行

module.exports = function (content) {

content+='123';

console.log(123)

}

同步

直接return content 或者callback(null, content)

异步

const callback = this.async()

callback(null, content)

33.自定义loader函数传参并校验

我们可以通过一个webpack官方提供的一个解析库 loader-utils,安装对应的库

我们可以通过一个webpack官方提供的校验库 schema-utils,安装对应的库

34,自定义plugin添加webpack的功能

相关推荐
艾小逗11 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
豆沙沙包?2 小时前
5.学习笔记-SpringMVC(P61-P70)
数据库·笔记·学习
小小小小宇3 小时前
手写 zustand
前端
Hamm3 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇4 小时前
前端国际化看这一篇就够了
前端
大G哥4 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext4 小时前
html初识
前端·html
白泽来了4 小时前
2个小时1.5w字| React & Golang 全栈微服务实战
笔记·go·react
小小小小宇4 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827524 小时前
vue中 vue.config.js反向代理
前端