随笔分类 -  webpack

28道Webpack面试题及答案
摘要：1、webpack的作用是什么，谈谈你对它的理解？ 现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。 所以现代化的前端 阅读全文
posted @ 2022-12-04 23:32 威武的大萝卜 阅读(1573) 评论(0) 推荐(0)
(七)产品阶段的构建
摘要：本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。对于复杂的项目来说，需要复杂的配置，这时候分解配置文 阅读全文
posted @ 2020-08-21 09:36 威武的大萝卜 阅读(240) 评论(0) 推荐(0)
(六)插件（Plugins）
摘要：Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成很多丰富的功能。如果我们需要在webpack中引入插件时，首先我们需要npm/cnpm安装需要的插件(内置插件不用安装)，其次要在webpack配置文件webpack.config.js中的plugins关键字部分添加该插件的一个实 阅读全文
posted @ 2020-08-21 09:35 威武的大萝卜 阅读(1037) 评论(0) 推荐(0)
(五)模块化处理
摘要：webpack可以将不同的文件都按照模块的方式进行处理，比如js，css等都可以通过不同的loader进行打包处理。 CSS webpack为我们提供css-loader和 style-loader两个工具来处理样式表，他们二者处理的任务是不同的。css-loader使你能够使用类似@import 阅读全文
posted @ 2020-08-21 09:33 威武的大萝卜 阅读(210) 评论(0) 推荐(0)
(四)Babel
摘要：Babel是一个广泛使用的转码器，它可以帮你实现以下操作： 它可以帮你将（ES6、ES7...）转换为现浏览器支持的ES5，这样你就不用考虑新标准是否被浏览器识别了。 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX。 1. 安装 Babel其实是几个模块化的包，其核心功能 阅读全文
posted @ 2020-08-21 09:32 威武的大萝卜 阅读(151) 评论(0) 推荐(0)
(三)Loaders
摘要：loaders中文翻译是装载机，从字面意思看它是用来安装某些东西的，它可以调用框架以外的脚本和工具来处理各种格式的文件，比如将Scss、Less分析转换成为CSS，将ES6、ES7转换为浏览器兼容的ES5，以及react中的JSX文件转换为JS文件。 npm install --save-dev b 阅读全文
posted @ 2020-08-21 09:26 威武的大萝卜 阅读(211) 评论(0) 推荐(0)
(一)Source Maps
摘要：什么是Source Maps Source Map字面意思就是原始地图，当开发环境中的源代码经过压缩，去空格，babel编译转化后，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，当打包出现问题需要我们debug的时候，我们往往都感到很头疼，因为打包后的文件都是压缩 阅读全文
posted @ 2020-08-21 09:24 威武的大萝卜 阅读(152) 评论(0) 推荐(0)
(二)构建本地服务器webpack-dev-server
摘要：webpack-dev-server 如果想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，那你就需要单独安装它作为项目依赖。 npm install webpack-dev-server -g // 全局安装 npm install webpack-dev-server --save- 阅读全文
posted @ 2020-08-21 09:20 威武的大萝卜 阅读(181) 评论(0) 推荐(0)
Webpack打包
摘要：image.png 一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的 阅读全文
posted @ 2020-08-21 09:12 威武的大萝卜 阅读(324) 评论(0) 推荐(0)
入门Webpack，看这篇就够了
摘要：2018年8月25日更新，目前 webpack 已经更新值 4.17.1 ，本文所用到的各种库或多或少有些过时，跟着代码操作下来可能会遇到各种问题，不过 webpack 的主体思想没变，所以还是希望本文对新学 webpack 的你，有所帮助。此外用基于 webpack 4.17.1 写了一个简单的d 阅读全文
posted @ 2020-07-14 10:44 威武的大萝卜 阅读(243) 评论(0) 推荐(0)
webpack
摘要：webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。 原理 特性 打包 CommonJs 和 AMD 模块（以及绑定） 可创建单个或多个按需加载的块，以减少初始加载时间 在编译期间会解决依赖关系，减少了运行时的大小 加载器可以在编译时预处理文件，如 coffee- 阅读全文
posted @ 2020-07-14 10:29 威武的大萝卜 阅读(120) 评论(0) 推荐(0)
这可能是最通俗易懂的 webpack 知识全景图
摘要：webpack webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件 Webpack 核心概念： Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Output（出口）：指示 webpack 如何 阅读全文
posted @ 2020-06-05 10:43 威武的大萝卜 阅读(440) 评论(0) 推荐(0)
从零构建 webpack 脚手架(基础篇)
摘要：webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它对于前端工程师来说可谓是如雷贯耳，基本上现在的大型应用都是通过 webpack 进行构建的。 webpack 具有高度可配置性，它拥有非常丰富的配置。在过去一段时间内曾有人将熟练配置 webpack 的人称呼为 “web 阅读全文
posted @ 2020-06-05 10:40 威武的大萝卜 阅读(722) 评论(0) 推荐(0)
「吐血整理」再来一打Webpack面试题
摘要：「吐血整理」再来一打Webpack面试题 全栈前端精选 今天 前端食堂 你的前端食堂，记得按时吃饭。 webpack 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这 阅读全文
posted @ 2020-06-04 18:21 威武的大萝卜 阅读(560) 评论(0) 推荐(0)
Webapck项目开发基本构建及配置
摘要：1、创建项目文件夹 myapp 手动创建myapp，或mkdir myapp 2、cd myapp 3、npm init （初始化项目） 4、一路回车（关于项目信息的填写，可以不写，一路回车即可） 可以在此步骤中填写一些项目信息，也可以在第5步骤完成后填写 5、以上步骤结束，myapp文件夹中创建了 阅读全文
posted @ 2020-04-28 18:55 威武的大萝卜 阅读(173) 评论(0) 推荐(0)