如何指向webpack从localhost:3000获取aseets?目前正在从url中获取

Question

如何指向webpack从localhost:3000获取aseets？目前它从http://medlabz.local/_next/static/development/pages/_app.js?ts=1586698905499，但我的内容在http://localhost:3000/_next/static/development/pages/_app.js?ts=1586698905499

在Vhosts配置中，我提供了这样一个代理：

ServerName medlabz.local
DocumentRoot /Users/abhisekshubam/Documents/work/app/Symfony/web/
RewriteEngine On 
RewriteCond %{REQUEST_METHOD} OPTIONS  
RewriteRule ^(.*)$ $1 [R=200,L]   
<Directory />
AllowOverride All
Require all granted
</Directory>
<Directory /Users/abhisekshubam/Documents/work/app/Symfony/web/>
AllowOverride All
Require all granted
</Directory>
ProxyPreserveHost Off
ProxyPass /amp/ http://localhost:3000/
ProxyPassReverse /amp/ http://localhost:3000/
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, PATCH, OPTIONS"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "Origin, Accept, Accept-  Version,  Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key, X-Response-Time, X-PINGOTHER, X-CSRF-Token,Authorization"
Header always set Access-Control-Expose-Headers "*"
RewriteEngine On 
RewriteCond %{REQUEST_METHOD} OPTIONS  
RewriteRule ^(.*)$ $1 [R=200,L]  
</VirtualHost>

我的webpack.config是这样的：

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin')
var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');
console.log(ASSET_PATH)
var config = {
devtool: "source-map",
entry: { app:  ['babel-polyfill',APP_DIR + '/App.js']},
//mode: "development",
output: {
path: BUILD_DIR,
filename: 'app.bundle.js',
chunkFilename: "[name].[hash].chunk.js",
},
context: APP_DIR,
resolve: {
modules: [path.join(__dirname, 'node_modules')]
},
resolveLoader: {
modules: [path.join(__dirname, 'node_modules')]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject:false,
}),
// Replace html contents with string or regex patterns
// We will use this to change the file paths
new HtmlReplaceWebpackPlugin([
{
pattern: '/../dist/app.bundle.js',
replacement: '/app.bundle.js'
} ]),
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
}),
],
module: {
rules: [{
test: /.js?$/,
loader: require.resolve("babel-loader"),
exclude: /node_modules/,
query: {
presets: ['@babel/preset-react', '@babel/preset-env'],
plugins: ["transform-es2015-modules-amd", "syntax-dynamic-import", "transform-class-properties"]
}
},
{
test: /.(sass|scss|css)$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
},
{
test: /.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(?[a-z0-9=.]+)?$/,
loader: 'file-loader?limit=100000'
}]
},
resolve:{
extensions:['*','.js']
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
stats: 'errors-only',
open: true,
port: 12000,
historyApiFallback: true,
open: true,
}
};
module.exports = config;```

Answer 1

它可以通过在next.config.js 中使用assetPrefix来解决

module.exports = withImages(withSass({
cssLoaderOptions: {
url: false
},
// Might need to change it here, before going to the production
assetPrefix: 'http://localhost:3000',
postcssLoaderOptions: {
config: {
ctx: {
theme: JSON.stringify(process.env.REACT_APP_THEME)
}
}
}
}));