Webpack-dev-server использует webpack-dev-server в качестве пути, когда publicPath: '/'

Попытка настроить webpack-dev-server для работы с существующим проектом, где ранее webpack был настроен без dev-сервера. Я добавил это в свою конфигурацию веб-пакета:

Я создал файл webpack.dev.config.js как таковой:

const path = require('path');
const config = require('./webpack.config');
const Webpack = require('webpack');

config.devServer = {
  contentBase: path.join(__dirname, 'public'),
  disableHostCheck: true,
  historyApiFallback: true,
  host: '0.0.0.0',
  hot: true,
  port: process.env.PORT || 7031,
  publicPath: '/',
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
};

config.plugins.push(new Webpack.NamedModulesPlugin(), new Webpack.HotModuleReplacementPlugin());

module.exports = config;

который выполняется с помощью этой команды npm в package.json:

webpack-dev-server --watch-poll --inline --config webpack.dev.config.js --colors --progress -d

используемые пакеты webpack:

    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.5.0"

веб-пакет.config.js:

const autoprefixer = require('autoprefixer');
const precss = require('precss');
const shell = require('child_process').exec;
const path = require('path');
const Webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const target = process.env.TARGET || 'dev';
process.env.TARGET = target;
console.info(`Building for target [${target}]`);

const javascriptPath = path.resolve('./src/javascripts')

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        include: javascriptPath,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react', 'stage-0'],
            },
          },
        ],
      },
      {
        test: /\.js$/,
        include: javascriptPath,
        use: [
          {
           loader: 'babel-loader',
            options: {
              presets: ['es2015', 'react', 'stage-0'],
            },
          },
        ],
      },
      {
        test: /\.coffee$/,
        include: javascriptPath,
        use: [
          {
            loader: 'coffee-loader',
          },
        ],
      },
      {
        test: /\.s(a|c)ss$/,
        include: path.resolve('./src'),
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true,
            },
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
                require('precss'),
              ],
            },
          },
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              singleton: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer'),
                require('precss'),
              ],
            },
          },
        ],
      },
      {
        test: /\.(ico|png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'images/img-[hash:6].[ext]',
            },
          },
        ],
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'svg-inline-loader',
          },
        ],
      },
      {
        test: /\.json$/,
        use: [
          {
            loader: 'json-loader',
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'raw-loader',
          },
        ],
      },
    /*
      {
        test: /index\.hamlc$/,
        use: [
          {
            loader: 'haml-loader',
            options: {
              target: target + '!' + path.resolve('./src/views/index.hamlc'),
              filename: path.resolve('./public/index.html'),
            },
          },
        ],
      },
    */
    ],
  },
  entry: {
    'configuration': './build_data/config.js',
    'application': './src/javascripts/index.js.coffee',
    'settings/client': './src/javascripts/settings_client.js',
  },
  output: {
    path: path.resolve('./public/dist'),
    filename: '[name]-[hash:6].js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.scss'],
    alias: {
      images: './public/images',
    },
  },
  plugins: [
    new CleanWebpackPlugin(['public/dist', 'public/index.html'], {
      root: path.resolve('.'),
      verbose: true,
      dry: false
    }),
    new HtmlWebpackPlugin({
      template: 'haml-loader?target=' + target +
        '!' + path.resolve('./src/views/index.hamlc'),
      filename: path.resolve('./public/index.html'),
    }),
    new Webpack.EnvironmentPlugin(['TARGET']),
    new Webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production'),
      },
    }),
  ],
};

Когда я запускаю webpack, я получаю это (верхняя половина вывода):

File build_data/config.js created
Building for target [dev]
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/dist has been removed.
clean-webpack-plugin: /Users/xxxxx/src/xxxxxx/xxxxxxx/public/index.html has been removed.
 10% building modules 3/3 modules 0 active                                  Project is running at http://0.0.0.0:7031/
webpack output is served from /
Content not from webpack is served from /Users/xxxxx/src/xxxxxx/xxxxxxx/public
404s will fallback to /index.html
Hash: e26133d6d376997a1da1                                                  r Version: webpack 3.12.0
Time: 28385ms
                                                  Asset     Size  Chunks                    Chunk Names
./images/loading.gif?h=de93ac1f9c3e69e58a5e877e73f1e9e2   3.7 MB          [emitted]  [big]
                                  application-e26133.js  23.1 MB       0  [emitted]  [big]  application
                              settings/client-e26133.js   912 kB       1  [emitted]  [big]  settings/client
                                configuration-e26133.js   912 kB       2  [emitted]  [big]  configuration
                                          ../index.html  10.2 kB          [emitted]

Однако, несмотря на то, что он говорит Project is running at http://0.0.0.0:7031/, вы можете добраться до него только через http://127.0.0.1:7031/webpack-dev-server

Мне нужно, чтобы в качестве корня был http://127.0.0.1:7031/, а не добавленный /webpack-dev-server и я не уверен, что даже вызывает это.

Любая помощь будет принята с благодарностью


person ServerNinja    schedule 04.02.2019    source источник


Ответы (1)


Я наверное разобрался со своей проблемой...

В webpack.config.js я сделал следующее:

добавил эту строку в начало:

const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');

Отредактирован вывод и добавлен publicPath:

   output: {
     path: path.resolve('./public/dist'),
     filename: '[name]-[hash:6].js',
     publicPath: '/'

Затем отредактировал плагины, добавив Html-webpack-harddisk-plugin:

    new HtmlWebpackPlugin({
      alwaysWriteToDisk: true,
      template: 'haml-loader?target=' + target +
        '!' + path.resolve('./src/views/index.hamlc'),
      filename: path.resolve('./public/index.html'),
    }),
    new HtmlWebpackHarddiskPlugin(),

В package.json добавлено:

"html-webpack-harddisk-plugin": "^1.0.1",

Пока поведение работает так, как ожидалось... Мне нужно провести еще несколько тестов, чтобы убедиться, что все так, как нужно для разработки.

person ServerNinja    schedule 04.02.2019