webpack
文章平均质量分 54
业火之理
这个作者很懒,什么都没留下…
展开
-
【webpack】利用webpack动态修改publicpath
一般情况,我们会在构建时使用env来构建出不同publicpath的应用,但是如果不让你使用env(比如没法区分环境变量),我最近遇到了这个问题,分享下解决方法。原创 2022-07-04 09:25:12 · 2167 阅读 · 2 评论 -
【typescript】tsdx入门
前言最近浏览别人库时发现别人使用tsdx打包typescript,这个库确实挺有优势的,解决了ts打包成库的一些配置设置问题。另外,还非常方便的整合了example和watch,文档,三位一体,相当方便。今天来玩玩这个包。官网https://www.npmjs.com/package/tsdxhttps://tsdx.io/#quick-start安装首先创建项目,使用:npx tsdx create mylib然后有3个选项,basic,react,react-with原创 2021-03-12 11:43:13 · 3343 阅读 · 2 评论 -
【webpack】webpack5模块联邦实战
前言weback的模块联邦原理和import相似,也是做成了预留的promise坑位,通过webpackjsonp加载,获取变成发请求获取而已。下面来实战一下。安装webpack最新做了个init脚手架,首先安装以下包:yarn add @webpack-cli/init webpack-cli webpack webpack-dev-server -D初始化脚手架:npx webpack-cli init注意!如果总是提示你找不到webpack,但你已经安装,很可能是因为原创 2021-03-06 17:36:31 · 3115 阅读 · 6 评论 -
【webpack】hmr学习笔记
前言以前并不是特别理解这个,只知道好像是通过websocket搞得,今天彻底搞懂它。基本使用首先进行安装cnpm i webpack@4.39.1 webpack-cli@3.3.6 webpack-dev-server@3.7.2 mime html-webpack-plugin express socket.io -Swebpack.config.jsconst path = require("path");const webpack = require("webpack")原创 2020-08-17 20:57:39 · 247 阅读 · 0 评论 -
【webpack】webpack构建流程笔记(六)
前言这篇讲plugin。官网链接Compiler与Compilationcompiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。当在 webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用。可以使用它来访问 webpack ...原创 2020-05-07 23:25:07 · 418 阅读 · 0 评论 -
【webpack】webpack构建流程笔记(五)
前言前面讲了loader,这篇手写loader流程。基本功能实现这个loader实现有点意思啊,一开始我还觉得可能是中间件什么的很绕的实现方式,毕竟这个pitch和normal的运行方式让人感觉可能是这么搞得,原来就是搞个对象把资源报起来,然后弄个指针在对象里,每走一次函数操作相应指针,然后拿取对应的loader就行了。简易实现下:const path = require('pa...原创 2020-05-03 20:07:08 · 279 阅读 · 0 评论 -
【webpack】webpack构建流程笔记(四)
前言上一篇loader没完,这篇继续。Pitch顺序loader正常来说是倒着走的,但那只是正常的loader,其实loader分成2部分,一部分是Normal一部分是Pitch。先配置3个loader,然后验证下顺序: test: /\.js$/, use: [ { ...原创 2020-04-06 23:43:01 · 209 阅读 · 1 评论 -
【webpack】webpack构建流程笔记(三)
前言第一篇tapable,第二篇ast,第三篇loaderwebpack构建流程从配置文件和命令行获取参数创建Complier对象执行Compiler的run方法创建Compliation寻找入口文件,调用所有配置的loader对所有模块进行编译。经loader编译完后得到每个模块最终内容及依赖关系。根据入口和模块依赖关系,组装包含多模块的chunk,把每个chunk转换成单...原创 2020-04-05 15:27:27 · 225 阅读 · 0 评论 -
【webpack】webpack构建流程笔记(二)
前言第一篇讲了tapable,这篇记录ast。ast是成为大神必会的,曾经我也是非常非常讨厌学这个,毕竟感觉写的没啥成就感。不过这个熟练掌握之后可以写很多插件之类,比如给你的组件写个按需加载插件,所以还是得学!!!ASTast是抽象语法树,webpack和很多工具核心就是通过ast对代码检查和分析。现在把js转换成语法树有很多解析器,每个js引擎有自己的抽象语法树格式。babel...原创 2020-04-04 16:09:28 · 167 阅读 · 0 评论 -
【webpack】webpack构建流程笔记(一)
前言上一篇是打包规律,这篇是构建流程,了解构建流程便于写插件。TapableTapable是webpack用的类似发布订阅的钩子。其中sync开头的钩子是同步钩子,async开头的钩子是异步钩子。async钩子里还分成串行Series钩子和并行Parallel钩子。带有Bail字段的是保险式,只要监听函数有返回值且不为undefined,跳过之后的监听函数。带有Waterfal...原创 2020-04-04 00:04:12 · 952 阅读 · 0 评论 -
【webpack】webpack打包规律笔记
前言由于以前学习时新知识太多,导致结果过于注意细节实现,从而忽略整体究竟怎么工作。这次重刷webpack理清下思路。而且以前特别特别讨厌学webpack,最近学新知识发现有涉及webpack,所以必须得理一下。webpack打包规律最简单的流程上说,webpack打包就是在页面引入了自己构建好的js文件。而这个js文件里有个自执行函数,里面的参数,就是webpack从各个文件中拿到...原创 2020-04-03 17:53:45 · 388 阅读 · 0 评论 -
【typescript】配置ts-import-plugin按需加载antd导致Inline JavaScript报错解决方案(非网上常见2种)
场景复现为了按需引入,于是我引用了ts-import-plugin,当时这么配置的: { test: /\.(j|t)sx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { transpileOnly: true, getCustom...原创 2020-02-22 02:36:38 · 6957 阅读 · 3 评论 -
【webpack】babel在webpack中的配置以及参数意思
背景最近总听很多人在问babel-polyfill到底要不要了?我于是到处百度搜资料整理了下。babel-polyfill相关7.0版本前是babel-core babel-polyfill babel-runtime之后就变成了作用域包:@babel/core @babel/polyfill @babel/runtime在7.4后@babel/polyfill被废弃。不用怀疑,无...原创 2019-12-06 06:28:14 · 540 阅读 · 0 评论 -
【webpack】webpack插件 html-webpack-plugin
作用由于每次生成的index.html还需要手动写死引入打包后的Js文件,并且html文件没有被压缩,所以需要使用此插件使用安装:npm i html-webpack-plugin -D新建目录public,里面放入Index.html在webpackbase设置里设置插件:const dev = require('./webpack.dev');const prod = r...原创 2019-09-23 21:29:00 · 282 阅读 · 1 评论 -
【webpack】webpack插件 clean-webpack-plugin
作用由于修改代码导致最后生产的文件会不同,所以需要每次生成文件前清空dist目录,这样防止无用文件越来越多或者避免手动清除。使用安装:npm i clean-webpack-plugin -D进行配置,用法很简单,直接导入再new即可。const {CleanWebpackPlugin}=require('clean-webpack-plugin'); plugins...原创 2019-09-23 21:48:35 · 794 阅读 · 0 评论 -
【webpack】超简易手写webpack打包
背景最近好多公开课讲了webpack,总结一下,有些讲的特别复杂,已经超越一节课吸收量了,就此先梳理出最简单打包方法。这里面也能有很多启发。流程一、原生打包使用与准备工作新建个文件夹,在里面npm init生成Package.json文件。安装webpack与webpack-cli -D安装,全局安装可能对以后项目造成影响。有人可能要问既然是手写为啥装webpack?这是为了拿它...原创 2019-09-16 01:14:06 · 462 阅读 · 2 评论 -
【webpack】拆分webpack.config.js文件
背景一般情况,一个项目插件比较多,有些配在开发环境,有些配在生产环境,如果全都写在一个webpack.config.js中就会显得很冗余,不好管理,所以一般要拆成三个配置文件,其中一个是生产环境和开发环境共有的,一个是只有生产环境的,一个是只有开发环境的。流程一、准备工作首先还是init一下然后装好webpack和webpack-cli。新建个文件夹myconfig,里面建好3个文...原创 2019-09-18 11:41:04 · 845 阅读 · 0 评论 -
【webpack】webpack中webpack-dev-server配置
流程一、安装与运行安装npm i webpack-dev-server -D设置脚本命令在webpack.config.js文件中的script对象里的命令本来是webpack的改成webpack-dev-server运行脚本试试,这时候会在这个目录下启动服务,并且能访问到这个目录下所有文件。比如可以试试访问http://localhost:8080/webpack.config.js...原创 2019-09-19 19:11:27 · 243 阅读 · 1 评论 -
【webpack】webpack解析css的loader与配置
作用由于webpack啥都没配时候是只认js不认css的,所以需要loader进行转换使用先在src下建一个index.js和index.csscss文件下写body的backguround给个颜色,index.js中直接引入import '.\index.css'注意:loader的执行顺序默认从下往上,从右往左。cssloader会解析css语法,styleloader会把...原创 2019-09-23 22:28:48 · 537 阅读 · 1 评论 -
【webpack】webpack里css预处理器配置
作用预处理器都是需要先把文件转成css再通过css-loader和style-loader转成页面样式。使用scss 需要2个预处理器,node-sass和sass-loaderless 要less和less-loaderstylus 要stylus和stylus-loaderloader是用来调用对应的解析器比如node-sass来解析文件的。以scss为例:首先src下建...原创 2019-09-24 01:20:12 · 661 阅读 · 0 评论