frontendchen的博客

webpack tree shaking概念。ES module导出的代码打包的时候进行tree shaking 摇晃掉多余的代码

针对不同开发场景配置 babel

webpack使用babel-loader翻译ES6代码

HMR 热模块更新

使用WebpackDevServer提升开发效率WebpackDevServer的使用搭建WebpackDevServer的使用修改webpack配置文件如下我们现在有一个问题，就是每次我修改完代码，想在浏览器上运行都需要手动的打开命令行，执行 npm run bundle 这个命令重新打包一次，然后再手动的打开dist目录下的index.html。这样的话，我们的开发效率是非常低下的。我们目前想要实现的是：如果我修改了src下面的源代码，dist目录下面的文件自动被打包修改，我再去页面看效果就简

Webpack中SourceMap的配置开始之前对项目做一些修正，删除dist文件夹，font文件夹和index.scss文件。index.js目录中输出一句hello worldwebpack配置如下图，打包之后输出 hello world因为现在我们的开发模式是 development，默认把SourceMap配置进去了，所以为了演示，配置devtool:"none"，关闭SourceMap，如果是webpack4 devtool:"none"打包之后打开html，正常在html中输出 h

webpack从0到1——09webpack使用plugin，打包更便捷webpack使用plugin，打包更便捷之前项目打包后，都是通过手动拷贝的index.html文件来打开打包之后的js文件的，假设我一开始没有dist目录，我进行

webpack从0到1——07使用Loader打包---样式文件（下）importLoadercss样式打包模块化使用webpack打包字体文件使用Loader打包—样式文件（下）importLoader补充一点关于样式打包的内容，打开webpack.config.js这个文件，如果要给css-loader增加配置项，那么这里就不要字符串，而是写一个对象。这个importLoaders是什么东西呢？假如我们写了一个scss文件，又在里面引入了一个额外的scss文件。在index.js中我们直接引入了

webpack从0到1——07使用Loader打包静态资源---样式（上）使用loader处理scss，less等文件添加前缀使用Loader打包静态资源—样式（上）写网页的时候我们，我们肯定会再项目中写CSS样式，我们先建一个index.css文件，放在src目录下，并在index.js中导入，并给图片添加样式此时我们运行npm run bundle打包命令，控制台报错你需要一个合适的加载器来处理这个文件很明显，我们需要css-loader来处理这个文件，先进行安装cnpm insta

webpack从0到1——06使用Loader打包静态资源---图片使用Loader打包静态资源—图片上一篇我们打包图片的名字，实际上被打包成了一个很长的字符串。我们需要打包的图片名字不变，这个时候我们就需要对webpack进行配置了。我们使用loader的使用参数，这个参数我们可以写到额外的配置项options中。这个配置项中我们可以写一些内容，比如说我希望打包生成的名字和打包之前一摸一样运行打包命令，生成的bundle文件中有一张和原图名称一样的图片[name] [hash] [ext]

webpack从0到1——05Loader是什么？Loader是什么？webpack是一个模块打包工具，可以打包js，css，图片等资源我们在demo02的文件夹中引入一张图片// 图片资源 图片资源 图片资源http://www.dell-lee.com/imgs/avatar.jpg下载之后放到src中在 index.js中导入这个张图片，并在终端运行打包命令npm run bundle这个时候发现打包就报错了，他说图片出了问题，模块解析失败。webpack默认知道如何打包js

webpack从0到1——04webpack的配置文件webpack的配置文件之前我们说过webpack是一个模块打包工具，它会帮你把模块打包到一起，当你打包js文件和图片文件他的流程肯定是不同的。假如你引入的是js文件，你直接使用 webpack执行打包就可以了，假如你引入的是一个图片文件，实际上你只要拿到图片的地址就可以了，我们并不需要把整个图片文件打包到js文件中去，所以js打包和图片的打包肯定是不同的。打包的时候哪一个是入口文件，打包到哪里，webpack没有智能到那种程度。需要你通过一个配

webpack从0到1——03搭建webpack环境webpack究竟是什么？搭建webpack环境webpack是基于node开发的模块打包工具，本质上是由node实现的，我们首先就要按照nodejs环境，最好是安装最新版本的nodejs，因为阅读webpack文档,打包速度有两个非常重要的点，一个是要保持nodejs版本非常的新，另一个就是webpack版本非常的新，webpack会利用nodejs中的一些新的特性来提高给它的打包速度，webpack作者也提到了，在某些复杂的情况下，使用新版本的we

webpack从0到1——02Bundler：模块打包工具Bundler：模块打包工具看完了上一篇：[https://blog.csdn.net/frontendchen/article/details/109724243]可能很多人认为webpack就是一个js的翻译器，对不起，大家千万不要被眼前的东西所蒙蔽，webpack实际上称不上一个翻译器，以为它只认识import这样的语句，其它高级的JS语法它一概不认，你把它称作js翻译器实际上是高看了它如果我们打开google输入webpack,可以

webpack从0到1——01初识webpackwebpack究竟是什么？初识webpack随着前端工程越来越复杂，单独写几个文件来维护代码，这样的方式已经无法保证项目的可维护性，所以我们就想，把不同的业务逻辑拆成模块，分开引入这些模块，每个模块自己做自己的事情，这样就可以保证项目的可维护性和可扩展性。假如你有几千个模块，你要在页面上引入几千个js文件吗？当项目大到这个地步时候，我们就要借助工具来帮助我们。webpack就是这样一个帮助我们管理复杂项目的工具，与webpack类似的工具有很多，比如说g