如何配置webpack devServer端口?

时间:2019-05-02 12:10:10

标签: docker webpack-encore

我正在尝试在docker的Symfony应用中使用webpack,但仍然出现错误:

获取http://localhost:8000/sockjs-node/info?t=1556798329924 404(未找到)

除此错误外,一切正常...

应用程序在端口8000上运行,而节点在端口8081上运行。具有8081端口的地址是可访问的,但是如何告诉webpack将端口8081与devServer一起使用?

这是我的webpack.config.js:

const Encore = require('@symfony/webpack-encore');
const StyleLintPlugin = require('stylelint-webpack-plugin');

const outputPath = './public/build/';
const publicPath = '/build';

Encore
  .setOutputPath(outputPath)
  .setPublicPath(publicPath)

  // Clean output dir before build
  .cleanupOutputBeforeBuild()

  .splitEntryChunks()
  .enableSingleRuntimeChunk()

  // uncomment if you're having problems with a jQuery plugin
  .autoProvidejQuery()

  // Generate JS files
  .addEntry('loader', './assets/javascript/loader.js')
  .addEntry('admin-loader', './assets/javascript/admin.js')

  // Generate CSS files
  .addStyleEntry('forms', './assets/styles/forms.scss')
  .addStyleEntry('grid', './assets/styles/grid.scss')
  .addStyleEntry('reboot', './assets/styles/reboot.scss')
  .addStyleEntry('styles', './assets/styles/styles.scss')
  .addStyleEntry('utilities', './assets/styles/utilities.scss')
  .addStyleEntry('admin', './assets/styles/admin.scss')

  .enableEslintLoader()
  .configureTerserPlugin((options) => {
    options.cache = true;
    options.parallel = true;
    options.terserOptions = {
      output: {
        comments: false,
      }
    }
  })

  .configureSplitChunks((options) => {
    options.chunks = 'all',
      options.maxInitialRequests = Infinity,
      options.cacheGroups = {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
            return `pckg.${packageName.replace('@', '')}`;
          },
        }
      }
  })

  // Enable SASS loader with PostCSS config
  .enableSassLoader()
  .enablePostCssLoader()

  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())

  // CSS Hot Loader for HMR in webpack dev server
  .addLoader({
    enforce: 'post',
    test: /\.(s?c|sa)ss$/,
    exclude: /node_modules/,
    loader: 'css-hot-loader',
  })

  .addPlugin(new StyleLintPlugin({
    lintDirtyModulesOnly: Encore.isProduction(),
    context: './assets/styles/',
    quiet: false,
  }));

const config = Encore.getWebpackConfig();

// Export settings and generate files
module.exports = config;

有人知道吗?

0 个答案:

没有答案