Question

我正在使用wasm-pack-plugin以便将一些rust代码编译到我的webpack项目中。

我正在从localhost:4000/js/app.js提供我的JavaScript。我的app.js文件中包含以下内容。

import("../../pkg").then(module => {
  module.run_app();
})

不幸的是，当我尝试运行应用程序时，它尝试加载localhost:4000/0.app.js。这将返回404。如果我手动转到localhost:4000/js/0.app.js，则会得到文件。

我如何告诉webpack它应该尝试打/js/0.app.js而不是0.app.js？

修改

webpack.config.js

const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  entry: {
    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
    webassemblyModuleFilename: "app.wasm"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.s[ca]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // translates CSS into CommonJS
          {
            loader: 'postcss-loader', // Run post css actions
            options: {
              plugins: function () { // post css plugins, can be exported to postcss.config.js
                return [
                  require('precss'),
                  require('autoprefixer')
                ];
              }
            }
          },
          'sass-loader', // compiles Sass to CSS, using Node Sass by default
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: 'elm-webpack-loader',
          options: {
            cwd: './elm'
          }
        }
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      bootstrap: 'bootstrap-sass',
      moment: 'moment'
    }),
    new WasmPackPlugin({
      crateDirectory: path.resolve(__dirname, "dashboard_employee"),
    })
  ],
})

我正在使用Phoenix Framework，这就是为什么将输出放入priv/static/js的原因。

Answer 1

您可以尝试设置output.publicPath：

output: {
  publicPath: "/js/"
}

webpack尝试从错误的路径加载文件

1 个答案: