Как указать веб-пакет, чтобы взять aseets от localhost: 3000? в настоящее время его взятие от URL - PullRequest
Новая
       34

Как указать веб-пакет, чтобы взять aseets от localhost: 3000? в настоящее время его взятие от URL

0 голосов
/ 12 апреля 2020

Как указать веб-пакет, чтобы получить ассеты от localhost: 3000? в настоящее время он принимает от 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;```

1 Ответ

0 голосов
/ 12 апреля 2020

Это можно решить с помощью assetPrefix в next.config. js


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