webpack 修改静态资源响应头

要修改Webpack的静态资源响应头，可以使用webpack-dev-server的headers选项，该选项允许您添加自定义标头到每个响应中。

例如，以下是如何将Cache-Control标头设置为no-cache：

devServer: {
  headers: {
    "Cache-Control": "no-cache"
  }
}

这将向所有静态资源请求添加Cache-Control标头，告诉浏览器不要缓存它们。

您还可以添加其他标头，例如Content-Security-Policy或X-Frame-Options，以提高应用程序的安全性。

devServer: {
  headers: {
    "Content-Security-Policy": "default-src 'self'",
    "X-Frame-Options": "DENY"
  }
}

请注意，这些选项只适用于开发服务器，如果您正在使用其他Web服务器，您需要在服务器配置中添加标头。

相关问题

webpack 修改外部静态资源响应头

要修改Webpack输出的外部静态资源响应头，可以使用webpack的output.headers选项，该选项允许您添加自定义标头到每个输出的文件中。

例如，以下是如何将Cache-Control标头设置为no-cache：

output: {
  headers: {
    "Cache-Control": "no-cache"
  }
}

这将向所有外部静态资源文件添加Cache-Control标头，告诉浏览器不要缓存它们。

您还可以添加其他标头，例如Content-Security-Policy或X-Frame-Options，以提高应用程序的安全性。

output: {
  headers: {
    "Content-Security-Policy": "default-src 'self'",
    "X-Frame-Options": "DENY"
  }
}

请注意，这些选项只适用于Webpack输出的外部静态资源文件，如果您正在使用其他Web服务器，您需要在服务器配置中添加标头。

webpack配置静态资源入口

在webpack中配置静态资源入口可以通过file-loader或url-loader来实现。具体步骤如下：

1. 安装file-loader或url-loader：

npm install file-loader --save-dev
npm install url-loader --save-dev

2. 在webpack配置文件中添加模块配置：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192, // 大于8kb的文件会被转成单独的文件，否则转成base64编码的字符串
            name: 'images/[name].[hash:8].[ext]' // 静态资源输出路径及文件名格式
          }
        }
      ]
    }
  ]
}

3. 在代码中引入静态资源：

import myImage from './images/my-image.png';

这样就可以在代码中引用静态资源了，webpack会自动将其打包到输出目录中。