使用 webpack 将资产文件夹推送到公共目录 [英] push assets folder to public directory with webpack

问题描述

我是第一次使用 Webpack.目前，一切都得到了很好的服务.我的问题是当我尝试构建 dist 文件夹时.目前我得到了我的 index.html 和 bundle.js 文件，但我不知道如何将我的资产推送到 dist 文件夹.

I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist folder. Currently I get my index.html and bundle.js files but I can't figure out how to push my assets to the dist folder.

我已经加载了文件加载器，但它实际上似乎并没有按照我的意愿行事，而且我运行的所有谷歌搜索都没有告诉我我需要知道什么.下面是我的配置文件.有人可以牵马到水边吗?此外，一旦我运行它，我是否需要将所有图像导入到我的 React 组件中?

I have file-loader loaded up but it doesn't actually seem to do what I want it to and none of the google searches I've run are telling me what I need to know. Below is my config file. Can someone lead a horse to water? Also once I get it running do I need to import all of images to my React components?

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'
    })
  ]
};

推荐答案

看起来我只需要使用 Copy-Webpack-Plugin.

Looks like I just needed to use Copy-Webpack-Plugin.

要将所有资产从app/assets/"复制到dist/assets/"，我只需要做:

To copy all the assets from 'app/assets/' to 'dist/assets/' I just needed to do:

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

这篇关于使用 webpack 将资产文件夹推送到公共目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！