webpack优化主要有三个方面：1.提高构建速度，2.减少打包体积，3.优化用户体验；webpack-bundle-analyzer插件可以看到各个文件的打包大小，帮助对对应的文件进行优化

在package.json中可以找到入口文件，这个文件的作用就是引入webpack核心函数（lib/webpack.js）以及工具文件，抛出整理好之后的webpack核心函数

转译器（transpiler）是指能够进行文件到文件一对一转换的编译器（compiler）。在 JS 世界中，常见的开箱即可用的转译器有typescript cli、babel cli 等，但他们一般只处理 .js 、 .ts 等脚本文件。而 webpack 尽管能通过配置处理各种文件

配置 Webpack Dev Server 可以解决本地开发前端应用时，手动执行 webpack 命令或 yarn build 命令，再去浏览器中访问 dist/index.html 的麻烦耗时操作，可有效简化流程

JavaScript 工具的未来将离 JavaScript 越来越远，一些工具（如 Webpack 和 Babel）的重要性正在日益下降。为什么？目前已经证明一些语言（如 Rust、Go 甚至 Zig）在捆绑、转译和编译方面比 JavaScript 具有更好的性能

在这篇文章中，我将从三个方面分享一些我常用的技巧：提高优化速度，压缩打包文件的大小，改善用户体验。无论是自己的日常开发，还是准备面试，都应该掌握一些关于 Webpack 的优化技巧。

在使用webpack进行项目打包的时候，我们可通过以下方式对不同类型的资源，进行文件名或文件路径的修改,使用copy-webpack-plugin插件复制的文件，这个就是配置from和to

ue项目中当你去index.html配置标题名,看见以下这些,可用下面去修改，vue-cli3脚手架的项目下，在根目录的vue.config.js中添加如下代码，假如没有这个文件的话，在根目录创建一个

前阵子在和朋友聊 Webpack 的时候，突然提到 Tree Shaking，但很惭愧的是我没有办法好好说明 Webpack 是如何做到 Tree Shaking 的，因此就趁这个年假的第一天抽空读 Webpack 的文件

Webpack 工程相当庞大，但是 Webpack 本质上是一种事件流机制，通过事件流将各种插件串联起来，最终完成 webpack 的全流程，而实现事件流机制的核心是今天要讲的Tapable 模块

我们之前打包构建的样式是在js中的，因为有css-loader将样式资源整合到js中了，而样式在js中会让js体积变得非常大，下载速度变得很慢，同时呢，是先加载js才能创建style标签插入到页面中

在前端社区里，webpack 可以说是一个经久不衰的话题。其强大、灵活的功能曾极大地促进了前端工程化进程的发展，伴随了无数前端项目的起与落。其纷繁复杂的配置也曾让无数前端人望而却步

这时模块a，模板b中的代码都暴露在全局环境中，如果模块a中定义了一个方法del。同学b并不知道，在模块b中也定义了一个方法del。这时便造成了命名冲突的的问题。如图

在 webpack 中，专注于处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。它和 loader 有以下区别：loader 是一个转换器，将 A 文件进行编译成 B 文件，比如：将 A.less 转换为 A.css，单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件

因为 Webpack 是以模块化的 JavaScript 文件为入口的，所以内置了对模块化 JavaScript的解析功能，支持 AMO, Cornmo nJS SystemJS ES6 parser 属性可以更细粒度地配置哪些模块语法被解析、哪些不被解析。同 noParse 配置项的区别在于