fengzhen8023

1. 写在前面在前面的博客中我们说过，webpack之所以有这么强大的功能，是因为它借助了很多 loader 和 插件 的帮助。在之前webpack配置中，我们已经介绍了很多 loader 和 插件 ，在这里再介绍三种小插件，可以帮助我们更好地使用webpack构建项目。这三款插件分别是：CleanWebpackPlugin、CopyWebpackPlugin、BannerPlugin(web...

1. 写在前面Webpack作为一个功能强大的构建工具，能够对我们书写的代码进行打包编译，从而生成一系列新的代码文件，使得项目能够够在浏览器中正常渲染。Webpack在工作的过程中，会对代码进行打包编译，这就会带来一个问题：如果项目中代码错误，浏览器中的报错提示，定位到的是打包编译后的代码，而不是我们在项目中实际书写的代码，比如以下报错：对于这种报错，如果是简单的项目还好。但是如果项目稍微...

1. 写在前面在前面的博客中，我们对Webpack项目进行了很多配置，也多次打包编译了项目。如果你细心观察的话，你会看到，项打包编译后的目代码,全部都放在了 build 文件夹下，没有根据文件格式的不同再次进行分类。但是我们所期望的场景是：项目打包编译之后，对文件进行分类，不同的文件放在不同的文件夹下。比如打包编译后，图片全部都放在 build/images 文件夹下，样式文件全部放在 bu...

1. 写在前面在前端项目中，图片是必不可少的一种资源。在使用图片的时候，我们可以有以下几种方式：在 .html 文件中，通过 <img src="" alt=""> 标签引入图片在 .css 文件中，通过 background: url() 属性来引入图片在 .js 文件中，通过 import 或者 require 语法来引入图片但是在基于webpack的项目中，如果你只...

1. 写在前面如果你熟悉Vue或者React的话，那么你肯定知道使用这些框架创建的应用属于 单页面应用 。这些框架底层使用的就是Webpack来构建项目，通过对项目文件进行打包编译，最终生成一个 .html 文件，所以我们说这些应用属于 单页面应用。但是在使用webpack进行构建项目的时候，不仅可以构建单页面应用，还可以构建多页面应用。在实际的项目中，如果该项目初期使用的就是 脚手架（比如...

1. 写在前面在一些基于Webpack的项目中，我们可能会遇到这个情况：使用本地开发服务器开发项目的时候，项目可以正常运行，所需要的资源也能正常请求到。但是项目经打包编译，部署到服务器上之后，会报错一些 404 的错误，显示一些图片文件、css文件或js文件等找不到。这是因为打包后的项目文件的引用路径问题，如果我们不做额外配置，打包编译后得到的 .html 文件的代码如下：<!DOCT...

1. 写在前面在做项目的时候，我们可能会经常遇到这种场景：一个变量我在很多文件中都要用到。这变量可能是第三方包，或者是自己定义的一个工具类对象等。比如在基于jQuery的多页面应用中，在每一个页面中都要使用到 jQuery对象 ；在单页面应用中，一个 消息提示框 在所有组件中都要用到。这个时候我们应该怎么办，如果在所有页面中都引用这个变量的话，工作量比较大，而且对项目的维护也不是很友好。这篇...

1. 写在前面JavaScript作为一门动态语言，灵活性是它的一个优点，同时又是一个缺点。有的时候因为语法太过于灵活，导致一些隐藏的Bug被我们忽略，代码质量得不到保证。为了提到项目代码的质量，大多数架构师在初始化项目的时候，都会使用一个检查工具来帮助实现代码的规范性和正确性，同时也可以提高项目代码后期的可维护性。在基于webpack的项目中，经常被使用到的代码检查工具是 ESLint 。...

1. 写在前面在前端项目中，占主导地位的文件，我想应该是 .js 文件。随着 JS语言 的不断升级改进，越来越多的高级语法被加入到该语言中，比如我们熟知的 ES6语法、ES7语法 等。虽然 ES6语法、ES7语法 我们写起来感觉非常方便，但是目前市面上的浏览器却不认识这些语法，这就导致我们辛辛苦苦做出来的项目却不能运行，让人很抓狂。这个时候我们要怎么办呢？办法肯定是有的，我们可以借助web...

1. 写在前面在前面的博客中，对webpack打包项目进行了简单介绍，而且都是关于打包编译 .js 文件的介绍。我们知道在一个基于webpack的项目中，肯定不止是 .js 文件，还有 .html 、.css、.png 等文件，在后面的博客中会给大家一一讲述，在这篇博客中，我们就介绍如何使用webpack打包编译 .css 文件。主要内容包括：如何在项目中引入 .css 文件打包编...

1. 写在前面在之前的一篇博客中：使用babel打包编译js文件 ，简单介绍了如果在webpack中使用babel对高级JS语法进行转换，以方便浏览器能够识别。但是babel的相关知识很多，不能面面俱到全部讲解，只能将我们项目中经常使用的一些插件或者配置介绍一下。我的目的是抛砖引玉，更多知识大家还是到babel官网学习：https://babeljs.io/ 。这篇博客中，根据我的学习，对b...

1. 写在前面在之前的博客中，每次使用webpack打包编译完成之后，我们都需要手动打开编译后的index.html文件，这样对于前端开发的调试很不方便。为了解决这一问题，webpack给出了 开发服务器 这一方案。在进行开发的过程中，我们可以使用webpack启动一个开发服务器，来实时查看自己的项目，很方便进行调试。相信很多前端开发者都用过webpack的开发服务器，但是有些开发者不是很了解...

1. 写在前面现在我们就开始正式学习 webpack 了，webpack是帮助我们打包编译项目的，所以在正式开始之前，我们需要初始化一个基于webpack的项目。在本篇博客中，将会涉及到以下的知识点：初始化一个基于webpack的项目体会webpack的默认打包设置自定义webpack的打包配置文件2. 初始化一个基于webpack的项目这一步简单，我们可以使用 npm 或者 y...

1. 写在前面经过前两章博客的基础讲解，我们知道如果想要打包编译项目，可以执行 npx webpack 命令，然后webpack就会根据配置文件 webpack.config.js 来对项目进行打包编译。但是现在我们可能遇到以下需求：webpack的配置文件不要叫做webpack.config.js,而是叫做 webpack.config.allen.js每次打包编译的时候，都要使用 np...

1. 写在前面很多从事前端开发的程序员，都会接触到 webpack 非常熟悉的概念，但是我想很多人对webpack只是一知半解，知道这是一个打包器，可以将我们编写的Vue代码、React代码打包编译成原生的JS代码，方便浏览器识别。但是对于webpack更底层的知识，比如：如何配置webpack，webpack为什么可以对我们的代码进行打包编译等，了解甚少。所以借着这次学习webpack的机...