![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
文章平均质量分 71
A-Tione
前端工作人员
展开
-
Webpack之优化
单独打包 runtime什么是runtime?为了让某个东西能够运行而提供的代码叫runtime,这里指为了能让IE运行而提供的代码。通过单独打包runtime,在代码和依赖没有变化的情况下,此后即可不再被重复打包,节省时间。webpack.config.jsmodule.exports = { optimization: { runtimeChunk: 'single', },}单独打包 node 依赖webpack.config.jsmodule.e原创 2021-06-24 19:54:11 · 434 阅读 · 0 评论 -
webpack配置打包支持scss、自动import全局文件、分享变量、单独提取css文件、自动生成HTML页面
支持scsswebpack.config.js { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], },scss自动import全局文件webpack.config.js use: [ 'style-loader',原创 2021-06-23 20:22:54 · 2080 阅读 · 0 评论 -
webpack配置打包js,jsx,ESLint插件、TypeScript、TSX
前言webpack输入代码支持IE用babel-loader打包JS用babel-loader打包JSX给webpack原创 2021-06-18 15:41:37 · 2523 阅读 · 0 评论 -
Webpack之plugin浅析
Webpack流程图plugin思路自己写webpack pluginloader与原创 2021-06-16 15:18:57 · 406 阅读 · 0 评论 -
Webpack之源码浅析
前言用了很长时间webpack,lodaer、plugin也用的很多了,但始终好奇webpack的内部运行机制是怎样的,我花了些时间看了些webpack源码,在这里用文字将他们记录下来。准备工作创建三个文件demo、webpack、webpack-cli 三个项目,其中demo 项目用于调用 demo/node_modules/webpack-cli 将 src/index.js 打包为 dist/main.js webpack 项目盛放的是从 github 下载的 webpack 源码.原创 2021-06-11 17:26:55 · 1691 阅读 · 0 评论 -
Webpack之loader
前言基于上次实现的简易打包器,我们只需在获取文件的位置区分是js文件还是css文件,如果是css文件则走css相关逻辑。核心代码:let code = readFileSync(filepath).toString() if(/\.css$/.test(filepath)){ code = ` const str = ${JSON.stringify(code)} if(document){ const style = document.c原创 2021-04-17 20:16:43 · 119 阅读 · 0 评论 -
Webpack之核心——打包
为什么要打包因为要解决两个关键问题:因为某些浏览器不支持: import和export关键字。 防止文件过多。import b from './b.js'const a = { value: 'a', getB: () => b.value + ' from a.js'}export default a1、浏览器不支持 import和export关键字虽然谷歌浏览器支持 <script type="module"></script> 写法,可原创 2021-03-30 20:31:01 · 524 阅读 · 0 评论 -
Webpack之AST、Babel、依赖
什么是ASTBabel相关使用通过检测key来避免重复循环依赖原创 2021-03-20 17:08:25 · 666 阅读 · 0 评论