[英]Webpack Dev Server Not Hot Reloading .vue files
正在研究一個項目,並確信HMR正在工作,我的任何.js文件,如果我要更新它們webpack將編譯,模塊將被替換所有熱像。
我正在研究一個.vue文件,webpack會重新編譯,但是沒有超級新的HMR。
希望有人可以看看並告訴我是否有什么東西是關閉的:
我在cli中使用的腳本看起來像這樣。
webpack-dev-server --d --watch --output-path ./public --config ./_src/webpack.config.js --progress --env.dev
我猜最重要的一點是:
devServer: {
contentBase: 'public',
hot: true,
filename: 'main.js',
overlay: true,
stats: { colors: true },
port: 3000,
proxy: {
'/': {
target: 'http://moment.local/',
secure: false,
changeOrigin: true
}
},
historyApiFallback: true
},
但如果它有幫助,這是我的整個配置。
const webpack = require('webpack')
const {resolve} = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = env => {
const addPlugin = (add, plugin) => add ? plugin : undefined
const ifProd = plugin => addPlugin(env.prod, plugin)
const removeEmpty = array => array.filter(i => !!i)
// Our Sass Extraction Plugin
const extractSass = new ExtractTextPlugin({
filename: 'style.css',
disable: env.dev
})
return {
entry: {
'vendor': ['jquery', 'KlaviyoSubscribe', 'learnq', 'select2', 'slick-carousel', 'moment', 'lodash'],
'main': resolve(__dirname, './js/index.js')
},
output: {
filename: '[name].js',
path: resolve(__dirname, '../public/'),
pathinfo: !env.prod
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang='scss'>
scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang='scss'>
sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' // <style lang='sass'>
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{ test: /\.s(c|a)ss$/,
use: extractSass.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true
}
},
'postcss-loader?sourceMap',
'sass-loader?sourceMap'
]
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
devtool: env.prod ? 'source-map' : 'eval',
devServer: {
contentBase: 'public',
hot: true,
filename: 'main.js',
overlay: true,
stats: { colors: true },
port: 3000,
proxy: {
'/': {
target: 'http://moment.local/',
secure: false,
changeOrigin: true
}
},
historyApiFallback: true
},
bail: env.prod, // Fail out on the first error if production
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: removeEmpty([
extractSass,
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
// Let's create js for our vendor scripts
name: 'vendor',
// (with more entries, this ensures that no other module
// goes into the vendor chunk)
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js',
// (Modules must be shared between 2 entries)
minChunks: 2
})
...
])
}
}
真的在這里掙扎,所以一切都會很棒。
聽起來你想要“熱”行為,但是你在你發布的腳本中缺少--hot
選項。 該選項的文檔在這里。
你已經有很多選擇; 只需添加--hot
,這應該可以解決問題。
更新:我確實看到你在webpack配置的devServer
屬性中設置了hot: true
,但如果我不在cli中使用--hot
,我在控制台中收到以下錯誤,這就是為什么我我說要使用它,即使你認為它將被配置覆蓋 - 它不是。
Uncaught Error: [HMR] Hot Module Replacement is disabled.
在根目錄中添加名為vue.config.js
的文件。
在其中,您可以通過以下方式啟用熱重裝:
module.exports = {
devServer: {
watchOptions: {
poll: true
}
}
};
我在通過vue create
設置的項目中使用了此設置。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.