如何使用Webpack构建React应用并导入资产文件夹?

弗兰基

我的主要问题是我正在尝试构建一个React应用程序,但是资产文件夹丢失了,而且我不知道如何在webpack.conf中导入它并对其进行配置。另一个问题是index.html的相对路径:我不知道它是否会在应用程序构建中受到影响。

提前致谢。

应用树

在此处输入图片说明

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配置:

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
  }
};

詹姆士

您可以在构建过程中使用webpack-copy-plugin复制其他文件夹/文件

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何通过Electron-builder使用资产文件夹构建电子应用程序

使用从资产文件夹导入角度

如何在React应用程序中从公用文件夹导入文件?

如何使用webpack在npm软件包子文件夹中导入模块?

React-native:Android Debug构建不会从react-native资产文件夹加载图像资产

dotnet核心应用程序,如何使用appsettings文件构建到输出文件夹

如何在构建时确保文件在资产文件夹中存在?

如何启用对资产文件夹的权限

Nestjs:如何构建Nestjs应用并生成dist文件夹?

如何根据文件夹名称识别最新的应用程序构建文件夹

使用webpack将资产文件夹推送到公共目录

在 /dist 文件夹中构建 Angular 资产

角度-更改构建资产文件夹中的数据

React + Node + Firebase,如何部署构建文件夹?

在codeigniter中,如何通过将资产文件夹放在应用程序文件夹中使其工作?

如何从已部署的HoloLens应用访问资产文件夹中的文件?

创建预构建事件以将文件复制到Android应用程序中的资产文件夹

Webpack - 构建我的应用程序后清空目标文件夹

android:从资产的文件夹(sqllite db)中导出数据,并将其导入应用程序的数据库中

资产文件夹中有未使用的资产会影响应用程序大小吗?

从React Native从共享文件夹导入

安装新应用时资产文件夹未升级

使用React Native构建两个孪生应用程序的最佳文件夹结构是什么?

如何使用webpack包含整个polyfill文件夹?

如何在构建之前使用 npm 删除文件夹

如何在React Native中访问其他文件夹中的资产?

如何从文件夹导入python文件

如何在后台线程中使用RX从android中的资产文件夹读取文件

如何使用Proguard将文件保存在资产文件夹中?