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 ответов:
две вещи были причиной моих проблем здесь:
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'} ] } };
после долгих поисков я нашел решение своей проблемы, в моем случае путь не был правильно настроен.
эта конфигурация решила мою проблему:
const path = require('path'); module.exports = { "entry": ['./app/index.js'], "output": { path: path.join(__dirname, 'build'), publicPath: "/build/", "filename": "bundle.js" }....
У меня была такая же проблема, и я считаю, что помимо всех этих пунктов, мы также должны поставить индекс.html вместе с выходным пакетом.js в той же папке и установите contentBase в эту папку, либо корневую, либо подпапку.
Это может произойти из-за ExtractTextPlugin. Деактивирует Экстратекстплюгин в режиме разработки. Используйте его только для сборки продукции.
Это случилось и со мной после запуска двух разных приложений на одном и том же
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
. Вы также можете увидеть, если это проблема, запустив сайт в режиме инкогнито.