Webpack-dev-server компилирует файлы, но не обновляет и не делает скомпилированный javascript доступным для браузера

Я пытаюсь использовать webpack-dev-server для компиляции файлов и запуска веб-сервера dev.

в своем package.json у меня есть свойство script, установленное в:

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

так --hot и --inline должен включить веб-сервер и горячую перезагрузку (как я понимаю).

в своем webpack.config.js file я устанавливаю настройки входа, выхода и devServer, а также добавляю загрузчик для поиска изменений в .vue файлы:

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /.vue$/, loader: 'vue'}
        ]
    }
};

Итак, с этой настройкой я запускаю npm run dev. Запускается webpack-dev-сервер, работает тест загрузчика модуля (т. е. когда я сохраняю его .Vue файл он вызывает webpack для перекомпиляции), но:

  • браузер никогда не обновляется
  • скомпилированный javascript, который хранится в памяти, никогда не становится доступным для браузера

На этом втором пуле я вижу это, потому что в окне браузера заполнители vue никогда не заменяются, и если я открою консоль javascript, экземпляр Vue никогда не создается и не становится доступным по всему миру.

что я упустил?

5 51
javascript webpack vue.js webpack-dev-server

5 ответов:

две вещи были причиной моих проблем здесь:

module.exports = {
    entry: './src/index.js',
    output: {

        // For some reason, the `__dirname` was not evaluating and `/public` was
        // trying to write files to a `public` folder at the root of my HD.
        path: __dirname + '/public', 

        // Public path refers to the location from the _browser's_ perspective, so 
        // `/public' would be referring to `mydomain.com/public/` instead of just
        // `mydomain.com`.
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{

        // `contentBase` specifies what folder to server relative to the 
        // current directory. This technically isn't false since it's an absolute
        // path, but the use of `__dirname` isn't necessary. 
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

вот исправил webpack.config.js:

var path = require('path');

module.exports = {
    entry: [
        './src/PlaceMapper/index.js'
    ],
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    devtool: 'source-map',
    devServer:{
        contentBase: 'public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};
52

после долгих поисков я нашел решение своей проблемы, в моем случае путь не был правильно настроен.

эта конфигурация решила мою проблему:

const path = require('path');

module.exports = {
  "entry": ['./app/index.js'],
  "output": {
    path: path.join(__dirname, 'build'),
    publicPath: "/build/",
    "filename": "bundle.js"
  }....
8

У меня была такая же проблема, и я считаю, что помимо всех этих пунктов, мы также должны поставить индекс.html вместе с выходным пакетом.js в той же папке и установите contentBase в эту папку, либо корневую, либо подпапку.

4

Это может произойти из-за ExtractTextPlugin. Деактивирует Экстратекстплюгин в режиме разработки. Используйте его только для сборки продукции.

1

Это случилось и со мной после запуска двух разных приложений на одном и том же webpack-dev-server порт один за другим. Это произошло даже при том, что другой проект был закрыт. Когда я перешел на порт, который не был использован, он начал работать напрямую.

devServer: {
    proxy: {
        '*': {
            target: 'http://localhost:1234'
        }
    },
    port: 8080,
    host: '0.0.0.0',
    hot: true,
    historyApiFallback: true,
},

если вы используете Chrome, как я, то просто откройте Developer Tools и нажать кнопку Clear site data. Вы также можете увидеть, если это проблема, запустив сайт в режиме инкогнито.

enter image description here

1