web-dev-qa-db-fra.com

pousser le dossier des ressources vers le répertoire public avec webpack

J'utilise Webpack pour la première fois. Actuellement, tout est très bien servi. Mon problème est lorsque j'essaie de créer un dossier dist. Actuellement, je reçois mon index.html et bundle.js fichiers mais je n'arrive pas à comprendre comment pousser mes actifs dans le dossier dist.

J'ai un chargeur de fichiers chargé, mais il ne semble pas vraiment faire ce que je veux et aucune des recherches Google que j'ai exécutées ne me dit ce que je dois savoir. Ci-dessous est mon fichier de configuration. Quelqu'un peut-il conduire un cheval à l'eau? De plus, une fois que je le lance, dois-je importer toutes les images dans mes composants React?

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
      { test: /\.(png|jpe?g|svg|)$/, use: { loader: 'file-loader', options: }}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};
javascriptreactjswebpackwebpack-file-loader
12
Alex Marple

On dirait que je devais juste utiliser Copy-Webpack-Plugin .

Pour copier tous les actifs de 'app/assets /' vers 'dist/assets /', je devais juste faire:

  plugins: [
    new CopyWebpackPlugin([
      { from: 'app/assets', to: 'assets' }
    ])
  ]
14
Alex Marple