使用 Webpack 提供静态内容（图像、svg 等）目录答案

【问题标题】：Serving a directory of static content (images, svg, etc..) from with Webpack使用 Webpack 提供静态内容（图像、svg 等）目录
【发布时间】：2019-12-06 17:55:53
【问题描述】：

我有以下包含 CSS、JS 和静态资产的文件夹结构：

- app/
  - frontend/

    - javascript/
      - application.js
      - (other various .js, .jsx files)

    - stylesheets/
      - application.scss
      - (other various .css, .scss files)

    - images/
      - (various png, jpg, svg, etc.. files)

我已将 webpack 配置为捆绑 JS + CSS，如下所示：

'entry': {
  'application': ['app/javascript/application.js', 'app/stylesheets/application.scss']
},
'output': {
  'filename': '[name]-[hash].js',
  'chunkFilename': '[name]-[chunkhash].chunk.js',
  'path': /public/packs,
  'publicPath': '/packs/',
  'pathinfo': true
},
'module': {
  'strictExportPresence': true,
  'rules': [
    {
      'test': /\.(css)$/iu,
      'use': [MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      'test': /\.(scss|sass)$/iu,
      'use': [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },

    {
      'test': /\.(js|jsx)?(\.erb)?$/u,
      'exclude': /node_modules/u,
      'use': ['babel-loader']
    }
  ]
},

如何对所有静态图像执行相同操作？我正在努力解决以下问题：

我的图像资产的“入口点”是什么？ JS 和 CSS 有一个明确的入口点（application.js、application.scss），但没有对等的图像
我查看了 file-loader，但它似乎只构建了来自某些 javascript 的 @import-ed 资产。它不会盲目地构建我的所有资产。
webpack 甚至打算处理这个问题吗？我应该编写一个单独的任务来手动将我的资产移动到public/ 文件夹吗？我想避免这种情况，因为它不能在本地与 webpack 开发服务器一起使用。

谢谢！

【问题讨论】：

按照说明使用 copywebpack 插件：medium.com/a-beginners-guide-for-webpack-2/…
谢谢！这完全符合预期。

标签： webpack webpack-dev-server webpack-4

【解决方案1】：

Robert Rowntree 建议使用 CopyWebpackPlugin 效果很好。

这是我使用的完整的 webpack 配置。与问题中发布的版本的主要区别在于底部添加了新的plugin。

const CopyPlugin = require('copy-webpack-plugin');

const config = {
  'entry': {
    'application': ['app/javascript/application.js', 'app/stylesheets/application.scss']
  },
  'output': {
    'filename': '[name]-[hash].js',
    'chunkFilename': '[name]-[chunkhash].chunk.js',
    'path': /public/packs,
    'publicPath': '/packs/',
    'pathinfo': true
  },
  'module': {
    'strictExportPresence': true,
    'rules': [
      {
        'test': /\.(css)$/iu,
        'use': [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        'test': /\.(scss|sass)$/iu,
        'use': [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },

      {
        'test': /\.(js|jsx)?(\.erb)?$/u,
        'exclude': /node_modules/u,
        'use': ['babel-loader']
      }
    ]
  },
  'plugins': [
    new CopyPlugin([
      {
        'from': '**/*',
        'context': `app/frontend/images`,
        'to': '/some/public/output/dir'
      }
    ])
  ]
}

module.exports = config;

【讨论】：