webpack 配置在不断的迭代优化目前已經到了4.29.6。在webpack 配置4这个版本中做了很多优化，引入了很多特性将获得更多模块类型，.mjs支持更好的默认值，更为简洁的模式设置更加智能的chunk，新增的splitChunks来自定义分隔代码块等等升级待4，在打包速度代码体积，数量以及运行效率上有一个飞跃。

二、安装webpack 配置4最基础入門

 

 
 

 
 

 
 
 

 
 

 在使用webpack 配置进行打包的时候默认情况下会将src下的入口文件(index.js)进行打包。
 
 

 可以直接在终端中输入命令webpack 配置 将当前的内容进行一个简单的打包
 
 

 
 
 

 这样dist文件夹下面多了一个main.js文件。
 
 

 但是有一个黄色警告mode是webpack 配置中独有的，两种打包环境一个是开发环境：development，另外一个是生产环境：production
 
 

 
 

 
 
 

 下面是webapck --mode=production命令打包，这个是代码压缩过的细心的朋友应该也发现打包后小了很多。
 
 

 
 
 

 
 

 在 webpack 配置 v4 中可以无须任何配置，然而大多数项目会需偠很复杂的设置这就是为什么 webpack 配置 仍然要支持 。这比在 terminal(终端) 中手动输入大量命令要高效的多所以让我们创建一个配置文件：
 
 

 进入到webpack 配置.config.js文件中进行配置，具体在代码中注释（这里简单的一些具体的下面会给大家）
 
 

 /*模块：例如解读css，图片转换压缩*/
 /*插件，用于生产的各種功能*/
 

 
 

 
 
 

 
 

 所以这里我们到package.json里面配置下命令让打包的时候执行我们在config/webpack 配置.dev.js下面配置的入口。
 
 

 
 

 
 
 

 
 

 
 
 

 现在配置打包时候的入口文件以及出口文件很哆朋友看webpack 配置.dev.js中的注释。入口是./src/main.js
 
 

 
 

 
 
 

 
 

 
 

以上就是最基础的webpack 配置4的搭建

 

 
 

 
 

 像 webpack 配置 这样的工具，将动态打包所有依赖（创建所谓的 ）
 
 

 webpack 配置 最出色的功能之一就是，除了引入 JavaScript还可以通过 loader 引入任何其他类型的文件。
 
 

 
 

 
 

 /*模块：例如加载css图片转换，压缩*/
 /*插件用于生产的各种功能*/
 

 
 

 
 

 
 
 

 
 

 

 
 

 
 
 

 
 

 
 
 

 注意：在哆数情况下，你也可以进行 以便在生产环境中节省加载时间。最重要的是现有的 loader 可以支持任何你可以想到的 CSS 风格 - ,  和  等。
 
 

 
 

 假想现在我們正在下载 CSS，但是像 background 和 icon 这样的图像要如何处理呢？使用 我们可以轻松地将这些内容混合到 CSS 中：
 
 

 /*模块：例如加载css，图片转换压缩*/
 /*插件，用于生产的各种功能*/

 

 在使用  时如前所示，会使用类似过程处理你的 CSS
 


 

 我们向项目添加一个图像然后看它是如何工作的，你可以使用任哬你喜欢的图像：
 


 

 
 


 

 


 

 

 
 

 
 
 

 果一切顺利你现在应该看到你的 sau.jpg图标成为了重复的背景图，以及文本旁边的 img 元素如果检查此元素，你将看到实际的攵件名已更改为 e2cb542c068aefc0c1d7b.jpg这意味着 webpack 配置
 在 src 文件夹中找到我们的文件，并对其进行了处理！
 
 

 
 

 像字体这样的其他资源如何处理呢file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录这就是说，我们可以将它们用于任何类型的文件也包括字体。让我们更新 webpack 配置.config.js 来处理字体文件：