![](/img/trans.png)
[英]webpack-dev-server Inline mode on CLI hot module reload page will refresh for change dom
[英]Webpack dev server DO reload, but page not change
這是我的package.json文件:
{
"name": "postronix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"transpile": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.24.0",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.9.0",
"sass-loader": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
},
"dependencies": {
"babel-polyfill": "^6.13.0",
"jquery": "^3.1.0"
}
}
webpack.config.js:
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0'],
'plugins': ['react-html-attrs']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true
})
]
}
我運行以下命令:
webpack-dev-server --content-base ./ --hot
每當我更改app.js文件時,此日志就會顯示在gitbash中:
Version: webpack 1.13.2
Time: 183ms
Asset Size Chunks Chunk Names
app.bundle.js 532 kB 0 [emitted] main
public/style.css 84 bytes 0 [emitted] main
chunk {0} app.bundle.js, public/style.css (main) 496 kB [rendered]
[0] ./src/app.js 1.1 kB {0} [built]
+ 300 hidden modules
webpack: bundle is now VALID.
在Chrome瀏覽器中,我打開了http:// localhost:8080 / webpack-dev-server / ,頁面屏幕上的每一次我修改app.js都重新加載,但是頁面沒有任何變化,就像app.js一樣和我做出改變之前一樣。
它僅使用webpack --watch編譯。
請幫忙
終於找到了答案。 我把publicPath:“ / assets /”放在webpack.config.js中
並在index.html中添加用於引用腳本的“資產”路徑:
<script src="assets/app.bundle.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="assets/public/style.css">
現在,它可以完美地編譯和重新加載。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.