webpack - webpack 尝试从错误的路径加载文件
问题描述
我正在使用wasm-pack-plugin将一些 rust 代码编译到我的 webpack 项目中。
我正在为我的 javascript 提供服务localhost:4000/js/app.js
。我的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 框架,这就是我将输出放入priv/static/js
.
解决方案
您可以尝试设置output.publicPath
:
output: {
publicPath: "/js/"
}
推荐阅读
- css - 用于颜色级别的 Bootstrap 5 映射
- python - 在 Flask 中使用 jsonify 时遇到问题
- sql - SQL 选择快,更新慢
- javascript - Javascript测验分数保存到下一页
- android-studio - android studio更新后预览面板提供程序(JavaFX WebView)错误
- amazon-web-services - AWS CDK - 多个堆栈 - 找不到 Lambda 代码位置的参数
- bash - 如何在 bash 提示符中查看我的实际目录?
- java - Tomcat 重新启动后,会话 JDBCStore 无法 java.lang.Class.forName NullPointerException - 但仅持续一分钟左右,然后工作
- tailwind-css - 使用自定义类设置默认 @screen 大小
- c++ - contiguous_range 是否总是 sized_range?