webpack-dev-server 404 и как правильно его настроить?

Откуда я иду

Я уже давно работаю с веб-пакетом, но впервые не изменяю для него стартовый набор, а пытаюсь все настроить с нуля.

Я последовал за этой прекрасной статьей на alivejs.com и унаследовал некоторые из описанных там подходов, комбинируя их с некоторыми моими более ранними установками (такими как установка различных имен и путей в зависимости от отправленной производственной переменной).

Я старался запускать "build" и "start" как можно больше во время лекции, чтобы не быть застигнутым неожиданным поведением, которое я не смог бы отследить. Это работало нормально.

Затем в какой-то момент, возясь с главой об исключении неиспользуемых CSS из сторонних фреймворков,я каким-то образом нарушил настройку своего dev-сервера. ( "run build"еще работает!)

ПРОБЛЕМА

Мой горячий сервер определен в 192.168.1.2:3000 (это просто, как я этого хочу). Когда я бегуwebpack-dev-server с настройками, показанными ниже, я получаю 404 ( Cannot GET /) в этом месте. Сейчас я много читал о том, как правильно настроить сервер разработки WebPack, но я все еще не понимаю его правильно...(скорее всего, не один здесь...) из-за того, что я до сих пор не до конца понимаю, как дорожки работают.

Это мое понимание (общая настройка сервера Dev):

(Пожалуйста, помогите мне, если я ошибаюсь в этом)

  • Выходной путь моего webpack.config.js будет обслуживаться только в памяти во время работы сервера dev, поэтому не будет виден физически (если вывод был path: path.join(__dirname, 'devServerFolder' например, я бы никогда не увидел эту папку в моей структуре проекта, если бы не я ее создал)
  • Статический index.html указывая на мой bundle.js будет необходимо в папке, где я указываю с publicPath а также с contentBase (который может быть моим devServerFolder который мне нужно создать с этим index.html в этом; как правило, в большинстве сетей вокруг public папка, используемая для сохранения производственной сборки)
  • Если я использую html-webpack-plugin плагин сгенерирует этот файл для меня автоматически без необходимости указывать на что-либо, потому что плагин записывает в него bundle.js

Вот некоторые моменты, которые действительно мешают мне хорошо понимать. Я много пробовал. из разные. комбинации, играющие с publicPathа такжеcontentBase настройки без везения, чтобы восстановить мой dev-сервер (сначала работал нормально). Пожалуйста, обратите внимание, что у меня нет проблем с кодом или с компиляцией моей сборки с run build, который работает нормально и так же, как и должно.

конфиги

Структура папок

webpack.test
|
| - app                    // App folder
     |
     | - index.js          // Entry point
     | - greet.js          // Hello World called by index.js
     | - sass              // Sass assets folder
     | - pug               // Pug (formerly jade) template and assets folder
| - node_modules
| - public                 // Production output folder
| - webpack-config-chunks  // Split up webpack configs folder
| - .babelrc 
| - package.json
| - webpack.config.js


Webpack.config.js

// Irrelevant parts omitted

const paths: {
  app:   path.join(__dirname, 'app'),    // The obvious one
  dev:   path.join(__dirname, 'bin'),
  /* As mentioned above, from my understanding,
     the output path for the dev server doesn't really matter at all
     when using html-webpack-plugin, am I wrong here? */
  build: path.join(__dirname, 'public')  // Another obvious one
  ...
};

...
entry: {
  app: production ? paths.app : [
    'webpack-dev-server/client?192.168.1.2:3000',
    'webpack/hot/only-dev-server',
     paths.app
  ]
  /* I can modify the entry to just be paths.app for every case
     but it won't change a thing regarding my problem. */
},

output: {
  path: production ? paths.build : paths.dev,
  publicPath: production ? '' : paths.dev + '/',
  /* ^ This is where I've tried just '' or paths.app or paths.build
       instead of paths.dev and delete publicPath all together. */
  filename: production ? '[name].[chunkhash].js' : '[name].js',
  chunkFilename: '[chunkhash].js'
},

devServer: {
  contentBase: paths.dev,
  /* ^ This = "webpack.test/bin" – See above.
       Tried several different paths here as well without luck. */
  hot: true,
  inline: true,
  stats: 'minimal',
  compress: true,
  host: '192.168.1.2',
  port: '3000',
},

plugins: [
  new HtmlWebpackPlugin(),
  new webpack.HotModuleReplacementPlugin(){
    multiStep: true
  }
]
...
Источник

2 ответа

Если вы еще этого не сделали, попробуйте ввести свою команду в скрипт запуска npm. Обратите внимание, что это одна из немногих команд, которые не нуждаются в "run", поэтому "npm start" запускает команду.

Также, если вы не возражаете против установки веб-пакета глобально, npm может принять команду веб-пакета.

    npm install webpack -g

Ниже я использую команду global webpack (запустите файл), затем говорю npm, чтобы посмотреть мои файлы, которые я перечислил на предмет изменений, запустите команду build, запустите webpack-dev-server, а затем откройте сервер в моем нужном месте.

    "scripts": {
     "build": "node-sass --output-style compressed src/css -o src/css",
     "start": "webpack --watch & webpack-dev-server --content-base dist --inline  & npm run build & open http://localhost:8080"
     },

Обратите внимание, что я объявил --content-base dist --inline. Вы заявили об этом в файле webpack.config.js, поэтому вам не нужно объявлять его снова в package.json. В настоящее время у меня нет файлов devServer в моем файле webpack.config, и все по-прежнему отлично работает через npm.

Насколько я понимаю, npm запускает сервер, а webpack.config.js содержит конфигурацию для команды webpack.

Источник

Вы можете попробовать использовать следующий вариант:

publicPath: production ? '' : '192.168.1.2:3000',

Webpack Dev Server генерирует пакеты с хешем не физически

Источник
Другие вопросы по тегам