javascript - How can I build a React app with Webpack and import an assets folder?

My main problem is that I'm trying to build a React Application but the assets folder is missing and I don't know how to import it and configure it in webpack.conf. Another problem is the relative route of index.html: I don't know if it will be affected in the application build.

Thanks in advance.

Application Tree

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="src/assets/favicon.ico"/>
</head>

<body>
    <div id="app"></div>
</body>

</html>

Webpack Config:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: 'public/index.html'
    }),
    new MiniCssExtractPlugin("style.css")
  ],
  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",
  devServer: {
    historyApiFallback: true,
    port: 3000
  }
};

Thanks in advance.

Application Tree

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="src/assets/favicon.ico"/>
</head>

<body>
    <div id="app"></div>
</body>

</html>

Webpack Config:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: 'public/index.html'
    }),
    new MiniCssExtractPlugin("style.css")
  ],
  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",
  devServer: {
    historyApiFallback: true,
    port: 3000
  }
};

Share Improve this question edited Nov 11, 2019 at 13:31 J. Murray 1,45211 silver badges19 bronze badges asked Nov 11, 2019 at 0:58 user12113809

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You can use webpack-copy-plugin to copy additional folders / files as part of the build process

new CopyPlugin([{ 
  from: path.resolve(__dirname, 'src', 'assets'), 
  to: path.resolve(__dirname, 'build', 'assets') 
}])

As @James mentioned: "You can use webpack-copy-plugin to copy additional folders / files as part of the build process"

However, there is a small error while using you example @James, it should be like this:

webpack.config.js

  plugins: [
    //...
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, 'src', 'assets'), to: path.resolve(__dirname, 'build', 'assets') },
      ],
    })
  ],

Hope it helps (upvote james for his help if it helps you too)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I build a React app with Webpack and import an assets folder? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)