Question

我有一个使用Webpack构建的ReactJS应用程序。因此，在我的 webpack.config.js 中，我返回了所需的代码以进行构建，并且所有内容均构建为“ build ”文件，在我的项目文件夹中。

这是当前文件结构：

Project
  | -- build
     | -- index.html
     | -- bundle.js
     | -- background.png
     | -- avatar.png

但是，我希望构建文件采用单独的结构，如下所示：

Project
      | -- build
         | -- templates
              | -- index.html
         | -- static
              | -- js
                    | -- bundle.js
              | -- images
                    | -- background.png
                    | -- avatar.png

下面提供了我的 webpack.config.js 。我尝试对其进行调整，并获得了结构，但是图像无法加载。 HTML和JS可以正常工作，但是图像没有加载。下面显示的是未更改的代码，该代码将所有文件构建到一个文件夹中。

const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "index.html"
});

module.exports = {
  entry: ["@babel/polyfill", './src/index.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  devtool: "#eval-source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.js?$/,
        include: /(src[\/\\]js)/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx?$/,
        include: /(src[\/\\]jsx)/,
        loader: 'babel-loader'
      },
      {
        test: /\.json?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'json-loader'
      },
      {
        test: /\.css?$/,
        loaders: ['style-loader', 'raw-loader']
      },
      {
        test: /\.scss?$/,
        loaders: ['style-loader', 'raw-loader', 'sass-loader', 'import-glob']
      },
      {
        test: /\.(png|ico|gif)?$/,
        loader: 'file-loader?limit=30000&name=[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [htmlWebpackPlugin]
};

Answer 1

在您的@NgModule({ schemas: [NO_ERRORS_SCHEMA], imports: [ NativeScriptCommonModule, NativeScriptRouterModule, NativeScriptRouterModule.forChild(routerConfig) ], declarations: [ RootModalComponent, HomeModalViewContentComponent, SecondModalViewContentComponent, ], entryComponents: [RootModalComponent] }) export class ModalViewExamplesModule { constructor() { } }中，将文件名设置为webpack.config.js。这会将您的包输出到新创建的static/js/bundle.js目录中：

build/static/js

然后将outputPath property of file-loader设置为module.exports = { // ... output: { filename: 'static/js/bundle.js', path: path.resolve(__dirname, 'build') }, // ... }

static/images/

将Webpack配置为构建文件所需的文件夹结构

1 个答案: