大脸猫~

一.Webpack和Code Splitting之间的关系Code Splitting指的是代码分割，什么是代码分割，代码分割和webpack有什么关系呢

webpack中两种开发模式development 和 production 的区分打包当我们在开发一个项目的时候，一般用development这个环境进行项目的开发，在这个打包环境下，webpack我们使用了devserve，可以帮我们起一个服务器，这个服务器里面还集成了一些HTML这样的特性，只要更改了代码，会帮我们重新打包，然后代码的内容会实时的展示在服务器对应的网页上。所以在开发环境下使...

Tree Shaking 概念详解Tree Shaking指的是什么？打开项目进入index.js文件中，清空代码，然后打包项目，不会报错，但是实际上会报一个警告在这个webpack版本下，如果在webpack.config.js配置了babel-loader的内容（我们已经将配置单独放在babelrc文件里），在preset-env中配置"useBuiltIns": "usage"...

配置React代码的打包react代码是一套非常先进的前端框架代码，我们如果想写react的代码，如何进行react代码的打包呢？在babel 的官网上的preset配置项，执行npm install --sava--dev @babel/preset-react如果想对react代码打包的话，可以借助babel的preset-react，帮助我们解析react中的语法，使用她我们就可以在项...

sd

Hot Module Replacement 热模块更新什么是HMR？我们写一个例子：在webpack.config.js配置一下css文件的解析 { test: /\.css/, use: [ 'style-loader', 'css-loader', 'postcss-loader'] },然后index.js 中写impor...

使用WebpackDevServer提升开发效率我们修改代码，如果想在浏览器上正确运行，都需要手动打包npm run bundle,这样的话我们的开发效率是非常低下的，我们希望，如果改了src下面的原代码，那么dist目录就会自动打包，那么就简单多了，不用每次都运行npm run bundle了。要想实现这样的功能，有三种做法方法一打开package.json文件，当我们运行npm run...

SourceMap的配置什么是SourceMap？在webpack.config.js，在开发者模式mode: "development"下，默认SourceMap已经配置好，所以我们先关闭SourceMap mode: "development", devtool: 'none',重新运行打包就可以了，发现运行成功，那么SourceMap到底是什么东西呢？如果故意定义错误语法，...

Entry与Output的基础配置entry打包的入口文件，entry可以配置为字符串，也可以配置为对象，默认生成的名字是main.js，当然也可以在output中指定生成文字的名字。如果想要...

在webpack中使用不同的loader可以完成不同文件类型的打包，这一篇写如何使用webpack中的plugins,让打包更便捷。在打包完成的dist文件下有个index.html文件，这个是我们手动拷贝到dist文件夹下，目的是可以方便访问打包生成之后的js文件。但是每次打包都要拷贝该index.html文件很麻烦，有什么办法可以帮助我们解决这个问题呢？可以利用webpack的插件帮我们实...

Loader打包样式当我们在src下写一个样式文件，并在index.js中引入使用该文件的样式，运行发现出错import './index.css'......img.classList.add('image')这是因为webpack只能识别js结尾的文件，不能识别css结尾的模块，所以打包会报错。所以需要在webpack.config.js中做配置当我们打包css的时候，需要用到...

补充样式打包：1.css-loader常用的配置如果要配置css-loader，那么就不能写字符串了，而要写一个对象 { test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', option...

使用loader打包静态资源（图片篇）上一节我们看到webpack 把图片名字被打包成了一个比较长的字符串。如果我们想不变动图片的名字，怎么办？这样的话我们需要对loader做一些额外的配置了。在使用loader的时候，可以配置一些参数，放在一个options的配置项比如说希望打包生成的名字形式跟之前图片的名字一致，后缀也一模一样 { test: /\.(j...

Loader是什么？webpack是一个模块打包工具，模块不仅仅是js文件，还可以是图片或者是css等等其他的任何内容。那图片和css是怎么打包的呢？如果我们按照打包js的方式打包图片，发现会报错，这是为什么呢？eg：const image = require('./image.jpg')原因是webpack只知道默认打包js模块，但是不知道如何打包类似于jpg这种文件的打包，所以在配...

浅谈webpack打包知识点在上次完成webpack基本配置之后运行npm run bundle 打包可以看到在我们打包的时候，输出了非常多的提示命令，那输出的这些信息是什么意思呢？Hash： 对应的是本次打包唯一的Hash值Version： 使用的是Webpack的版本Time：当前这个包整体的打包耗时Asset：下面有个index.js文件，表示我们打包出了一个index.js...

webpack的配置文件webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，那么直接拿过JS文件来执行就可以了，假如引入的是图片文件，实际上只需要拿到图片的地址就可以了，并不需要把整个图片文件打包到js里面去。在打包的时候哪个文件才是打包的入口文件，打包出的文件放到哪里，这就需要配置文件来告诉webpa...

搭建Webpack环境webpack是基于node开发的模块打包工具，本质上是由node实现的，首先要安装node环境。新版本的nodejs会很大程度的提高webpack的打包速度。提高webpack打包速度：一是保持nodejs的版本尽量的新，另一个是保持webpack的版本尽量的新。高版本的webpack会利用node新版本的一些特性，来提高打包速度。安装好node之后新建一个文件夹...

webpack模块打包工具从上文看webpack很像是JS的翻译器，其实这个定义是不准确的，webpack只认识import这样的语法，很多高级的JS代码并不认识。webpack实际上是一个模块打包工具，如下图的Header、Sidebar、Content是一个个的模块，webpack是将这些模块打包在一起的工具，生成一个最终的JS文件。注意的是： 当我们使用import引入一些类或者代码...

随着前端工程越来越复杂，单独建几个文件写业务代码已经无法保证项目的可维护性，所以就把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块做自己的事情，这样就能保证项目的可维护性和可扩展性。但是假如有几千个模块，在页面能引入几千个JS文件么，所以当项目达到这种程度，我们就需要借助工具来管理我们的模块。webpack就是这种工具来帮助我们管理模块，与webpack相似，还有很多相似的工具，比如说...