这是我的webpack.config.dev.js:
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
resolve: {
alias: {
jquery: path.resolve(__dirname, 'src/lib/jquery-1.11.1.min.js'),
Vue: path.resolve(__dirname, 'src/lib/vue.js'),
Vuex: path.resolve(__dirname, 'src/lib/vuex.js'),
VueRouter: path.resolve(__dirname, 'src/lib/vue-router.min.js'),
axios: path.resolve(__dirname, 'src/lib/axios.min.js')
}
},
entry : {
app: './src/app.js',
vendors: ['jquery', 'Vue', 'Vuex', 'VueRouter', 'axios']
},
output: {
path: path.resolve(__dirname, 'dist'),
// publicPath: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
devServer: {
contentBase: path.join(__dirname, "dist"),
inline: true,
hot: true,
compress: true,
port: 8888,
publicPath: 'http://localhost:8888/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules/')
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: 'url-loader?limit=8192'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vendors', 'manifest'],
minChunks: Infinity
}),
new htmlWebpackPlugin({
template: './index.html',
inject:'body',
hash: true,
chunks: ['vendors', 'manifest', 'app']
}),
new webpack.HotModuleReplacementPlugin()
]
}
而package.json
是:
{
"dependencies": {
"express": "^4.15.3"
},
"name": "ws",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^2.6.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.prod.js -p",
"dev": "webpack-dev-server --config webpack.config.dev.js"
},
"author": "gy",
"license": "MIT",
"description": ""
}
模板html是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<ul>
<li>hhhh</li>
<li>a</li>
<li></li>
<li>test</li>
</ul>
</div>
</body>
</html>
,app.js是:
var Vue = require('Vue');
var $ = require('jquery');
// var axios = require('axios');
var VueRouter = require('VueRouter');
var index = require('./index.scss');
var app = new Vue({
el: '#app',
data: {
message: 'hello testssaalaalla test nnn h'
},
mounted: function() {
$('#app ul li').html('from jquery')
}
});
在开发环境中,当我同时设置inline: true
和hot:true
时,当我更改app.js
中的代码时,浏览器无法自动刷新。就像我将message
属性更改为test1
时,浏览器没有进行刷新,我需要手动完成。但当我删除HMR部分,它的工作原理。需要一些帮助,提前谢谢。
答案 0 :(得分:0)
添加
JavaRDD<String> words = lines.flatMap(s -> Arrays.asList(SPACE.split(s)));
在package.json的脚本中并使用npm start运行你的应用程序,它应该自动刷新。
也不,我认为没有必要提及
"start": "webpack-dev-server --hot"
webpack.config.js中的