一组webpack插件。例如DefinePlugin允许你创建可在编译时配置的全局常量。这时需要再开发环境构建和生成环境构建之间产生不同行为 webpack.config.js module.exports ={ plugins：[ new webpack.DefinePlugin({
}) ] } 一个复杂的示例 webpack.config.js var webpack =require('webpack') //导入非webpack自带默认插件 module.exports ={ plugins:[ new webpack.IgnorePlugin(/^./locale/), 编译时（compile time）插件 new webpack.DefinePlugin({ new DashboardPlugin(), new webpack.HotModuleReplacementPlugin(),
}) ] } 加载images图像
假如，在下载css,但是像background和icon图像，要怎么处理 在webpack5中， webpack.config.js const Path = require('path'); module.exports ={ entry:'./src/index.js', output:{ filename:'bundle.js, path:path.resolve(_dirname,'dist') }, module:{ rules:[ test:/.css/i, use:['style-loader',''css-loader], ] },{ test:/\.(png|svg|jpg|jpeg|gif)/i type:'asset/resource' } } 现在，再import myImage from '.my--image.png'时。此图像将被处理并添加到output目录，并且myImage变量将包含该图像在处理后的最终url.在试用css-loader时，，会试用类似过程处理css中的url('./my-image.png'). loader会识别这是一个本地文件，会将'./my-image.png'路径，替换为output目录中图像的最终路径而html-loader以相同的方式处理《img src='./my-image.png'/> 我们向项目添加一个图像，然后看它时如何工作的， 管理资源 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com) 如果一切顺利，你现在应该看到icon图标成为了重复的背景图，以及hello webpack文本旁边的img元素。如果检查此元素，你将看到实际的文件名已更改29822eaa871e8eadeaa4.png.这意味着webpack在src文件中找到我能的文化，并对其进行了处理 关于缓存 输出文件的文件名 webpack会生成一个可部署的/dist目录，然后把打包的内容放置目录中。只要dist目录中的内容部署到server上，client(通常是浏览器)就能够访问server的网站及资源。最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码的时候，就会显得很棘手。
