webpack5

记录进行webpack5配置时踩的坑

安装webpack-dev-server

安装过程：参考官方文档 使用webpack-dev-server

安装和配置过程都很顺利，但按照官方的文档配置脚本命令时出错：

官方:

"start": "webpack-dev-server --open"

更改为：

start": "webpack serve"

图片

根据之前webpack4的教程 安装配置url-loader和file-loader就可以引入图片，但是我都尝试了发现图片死活出不来

查看webpack5的官方的文档，发现是更新啦！指路：资源模块

webpack5在资源模块类型(asset module type)添加了 4 种新的模块类型，这样我们使用图片这些静态资源时就不在需要安装loader了来加载了，具体如下:

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

所有，无需安装loader，只需要配置一下，build之后，在dist文件夹中就可以看见图片啦：

module.exports = {
  /* ... */
  module: {
    rules: [
      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
    ],
  },
}