![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
fengzhen8023
专于前端,不止于前端!
展开
-
webpack入门学习笔记15 —— Webpack中的三个小插件
1. 写在前面在前面的博客中我们说过,webpack之所以有这么强大的功能,是因为它借助了很多 loader 和 插件 的帮助。在之前webpack配置中,我们已经介绍了很多 loader 和 插件 ,在这里再介绍三种小插件,可以帮助我们更好地使用webpack构建项目。这三款插件分别是:CleanWebpackPlugin、CopyWebpackPlugin、BannerPlugin(web...原创 2019-08-11 17:58:46 · 441 阅读 · 0 评论 -
webpack入门学习笔记14 —— Webpack的源码映射
1. 写在前面Webpack作为一个功能强大的构建工具,能够对我们书写的代码进行打包编译,从而生成一系列新的代码文件,使得项目能够够在浏览器中正常渲染。Webpack在工作的过程中,会对代码进行打包编译,这就会带来一个问题:如果项目中代码错误,浏览器中的报错提示,定位到的是打包编译后的代码,而不是我们在项目中实际书写的代码,比如以下报错:对于这种报错,如果是简单的项目还好。但是如果项目稍微...原创 2019-08-11 17:54:13 · 1472 阅读 · 0 评论 -
webpack入门学习笔记11 —— 在项目中对打包编译的文件进行分类
1. 写在前面在前面的博客中,我们对Webpack项目进行了很多配置,也多次打包编译了项目。如果你细心观察的话,你会看到,项打包编译后的目代码,全部都放在了 build 文件夹下,没有根据文件格式的不同再次进行分类。但是我们所期望的场景是:项目打包编译之后,对文件进行分类,不同的文件放在不同的文件夹下。比如打包编译后,图片全部都放在 build/images 文件夹下,样式文件全部放在 bu...原创 2019-07-28 15:54:43 · 319 阅读 · 0 评论 -
webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面在前端项目中,图片是必不可少的一种资源。在使用图片的时候,我们可以有以下几种方式:在 .html 文件中,通过 <img src="" alt=""> 标签引入图片在 .css 文件中,通过 background: url() 属性来引入图片在 .js 文件中,通过 import 或者 require 语法来引入图片但是在基于webpack的项目中,如果你只...原创 2019-07-28 15:46:46 · 9825 阅读 · 0 评论 -
webpack入门学习笔记13 —— 使用Webpack打包多页面应用
1. 写在前面如果你熟悉Vue或者React的话,那么你肯定知道使用这些框架创建的应用属于 单页面应用 。这些框架底层使用的就是Webpack来构建项目,通过对项目文件进行打包编译,最终生成一个 .html 文件,所以我们说这些应用属于 单页面应用。但是在使用webpack进行构建项目的时候,不仅可以构建单页面应用,还可以构建多页面应用。在实际的项目中,如果该项目初期使用的就是 脚手架(比如...原创 2019-08-04 16:28:55 · 517 阅读 · 1 评论 -
webpack入门学习笔记12 —— 打包编译后文件的引入路径问题
1. 写在前面在一些基于Webpack的项目中,我们可能会遇到这个情况:使用本地开发服务器开发项目的时候,项目可以正常运行,所需要的资源也能正常请求到。但是项目经打包编译,部署到服务器上之后,会报错一些 404 的错误,显示一些图片文件、css文件或js文件等找不到。这是因为打包后的项目文件的引用路径问题,如果我们不做额外配置,打包编译后得到的 .html 文件的代码如下:<!DOCT...原创 2019-08-04 16:25:55 · 1514 阅读 · 0 评论 -
webpack入门学习笔记09 —— 在项目中引入全局变量
1. 写在前面在做项目的时候,我们可能会经常遇到这种场景:一个变量我在很多文件中都要用到。这变量可能是第三方包,或者是自己定义的一个工具类对象等。比如在基于jQuery的多页面应用中,在每一个页面中都要使用到 jQuery对象 ;在单页面应用中,一个 消息提示框 在所有组件中都要用到。这个时候我们应该怎么办,如果在所有页面中都引用这个变量的话,工作量比较大,而且对项目的维护也不是很友好。这篇...原创 2019-07-21 10:26:26 · 1581 阅读 · 0 评论 -
webpack入门学习笔记08 —— 使用ESLint检查项目代码
1. 写在前面JavaScript作为一门动态语言,灵活性是它的一个优点,同时又是一个缺点。有的时候因为语法太过于灵活,导致一些隐藏的Bug被我们忽略,代码质量得不到保证。为了提到项目代码的质量,大多数架构师在初始化项目的时候,都会使用一个检查工具来帮助实现代码的规范性和正确性,同时也可以提高项目代码后期的可维护性。在基于webpack的项目中,经常被使用到的代码检查工具是 ESLint 。...原创 2019-07-21 10:24:55 · 360 阅读 · 0 评论 -
webpack入门学习笔记06 —— 使用babel打包编译js文件
1. 写在前面在前端项目中,占主导地位的文件,我想应该是 .js 文件。随着 JS语言 的不断升级改进,越来越多的高级语法被加入到该语言中,比如我们熟知的 ES6语法、ES7语法 等。虽然 ES6语法、ES7语法 我们写起来感觉非常方便,但是目前市面上的浏览器却不认识这些语法,这就导致我们辛辛苦苦做出来的项目却不能运行,让人很抓狂。这个时候我们要怎么办呢?办法肯定是有的,我们可以借助web...原创 2019-06-30 10:38:48 · 1186 阅读 · 0 评论 -
webpack入门学习笔记05 —— 使用webpack打包编译css文件
1. 写在前面在前面的博客中,对webpack打包项目进行了简单介绍,而且都是关于打包编译 .js 文件的介绍。我们知道在一个基于webpack的项目中,肯定不止是 .js 文件,还有 .html 、.css、.png 等文件,在后面的博客中会给大家一一讲述,在这篇博客中,我们就介绍如何使用webpack打包编译 .css 文件。主要内容包括:如何在项目中引入 .css 文件打包编...原创 2019-06-30 10:34:49 · 966 阅读 · 0 评论 -
webpack入门学习笔记07 —— 关于babel的一些补充
1. 写在前面在之前的一篇博客中:使用babel打包编译js文件 ,简单介绍了如果在webpack中使用babel对高级JS语法进行转换,以方便浏览器能够识别。但是babel的相关知识很多,不能面面俱到全部讲解,只能将我们项目中经常使用的一些插件或者配置介绍一下。我的目的是抛砖引玉,更多知识大家还是到babel官网学习:https://babeljs.io/ 。这篇博客中,根据我的学习,对b...原创 2019-07-13 17:07:40 · 173 阅读 · 0 评论 -
webpack入门学习笔记04 —— 安装和配置webpack开发服务器
1. 写在前面在之前的博客中,每次使用webpack打包编译完成之后,我们都需要手动打开编译后的index.html文件,这样对于前端开发的调试很不方便。为了解决这一问题,webpack给出了 开发服务器 这一方案。在进行开发的过程中,我们可以使用webpack启动一个开发服务器,来实时查看自己的项目,很方便进行调试。相信很多前端开发者都用过webpack的开发服务器,但是有些开发者不是很了解...原创 2019-06-23 21:12:05 · 483 阅读 · 1 评论 -
webpack入门学习笔记02 —— 初始化一个webpack项目
1. 写在前面现在我们就开始正式学习 webpack 了,webpack是帮助我们打包编译项目的,所以在正式开始之前,我们需要初始化一个基于webpack的项目。在本篇博客中,将会涉及到以下的知识点:初始化一个基于webpack的项目体会webpack的默认打包设置自定义webpack的打包配置文件2. 初始化一个基于webpack的项目这一步简单,我们可以使用 npm 或者 y...原创 2019-06-15 14:56:52 · 439 阅读 · 0 评论 -
webpack入门学习笔记03 —— 自定义脚本,帮助项目管理
1. 写在前面经过前两章博客的基础讲解,我们知道如果想要打包编译项目,可以执行 npx webpack 命令,然后webpack就会根据配置文件 webpack.config.js 来对项目进行打包编译。但是现在我们可能遇到以下需求:webpack的配置文件不要叫做webpack.config.js,而是叫做 webpack.config.allen.js每次打包编译的时候,都要使用 np...原创 2019-06-19 21:06:46 · 288 阅读 · 0 评论 -
webpack入门学习笔记01 —— webpack基本简介
1. 写在前面很多从事前端开发的程序员,都会接触到 webpack 非常熟悉的概念,但是我想很多人对webpack只是一知半解,知道这是一个打包器,可以将我们编写的Vue代码、React代码打包编译成原生的JS代码,方便浏览器识别。但是对于webpack更底层的知识,比如:如何配置webpack,webpack为什么可以对我们的代码进行打包编译等,了解甚少。所以借着这次学习webpack的机...原创 2019-06-13 22:03:48 · 216 阅读 · 0 评论