webpack笔记

发布时间:2024年01月21日

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的功能

文章来源:https://blog.csdn.net/QAEARQ/article/details/135729042
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。