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

我有以下带有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

），但是对于图像没有等价物

我查看了一下，但它似乎只构建了从一些javascript导入的资产。它不会盲目地建立我所有的资产

webpack是用来处理这个问题的吗？我是否应该编写一个单独的任务来手动将我的资产移动到

public/

文件夹中？我希望避免这种情况，因为它无法在本地与webpack dev服务器一起工作

---

谢谢

Robert Rowntree建议使用

CopyWebpackPlugin

效果很好

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

插件

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;

使用copywebpack插件，如前所述：谢谢！这完全符合预期。