正在研究一个项目并且确信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
})
...
])
}
}
真的在这里挣扎,所以一切都会很棒。
答案 0 :(得分:1)
听起来你想要&#34; hot&#34;行为,但您错过了您发布的脚本中的--hot
选项。该选项的文档is here.
你已经有很多选择;只需添加--hot
,这应该可以解决问题。
<强>更新强>
我确实看到您在webpack配置的hot: true
属性中设置了devServer
,但是如果我不在cli中使用--hot
,我在控制台中收到以下错误,所以这就是为什么我要说使用它,即使你认为它会被配置覆盖 - 它不是。
Uncaught Error: [HMR] Hot Module Replacement is disabled.
答案 1 :(得分:1)
在您的根目录中添加一个名为vue.config.js
的文件。
在其中,您可以通过以下方式启用热重载:
module.exports = {
devServer: {
watchOptions: {
poll: true
}
}
};
我在通过vue create
设置的项目中使用了此设置。