简体   繁体   English

Webpack开发服务器可以重新加载,但页面不会更改

[英]Webpack dev server DO reload, but page not change

Here is my package.json file: 这是我的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: 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
    })
    ]
}

i run this command: 我运行以下命令:

webpack-dev-server --content-base ./ --hot

whenever i make changes to my app.js file, this log shown in gitbash: 每当我更改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.

in chrome web browser, i opened http://localhost:8080/webpack-dev-server/ , the page screen DO reload every i modify app.js, but no any change to the page, it's like the app.js just the same as before i make change. 在Chrome浏览器中,我打开了http:// localhost:8080 / webpack-dev-server / ,页面屏幕上的每一次我修改app.js都重新加载,但是页面没有任何变化,就像app.js一样和我做出改变之前一样。

its just compiled only with webpack --watch. 它仅使用webpack --watch编译。

please help 请帮忙

Finally found an answer. 终于找到了答案。 i put publicPath: "/assets/" in webpack.config.js 我把publicPath:“ / assets /”放在webpack.config.js中

and in index.html i add "assets" path for referring script: 并在index.html中添加用于引用脚本的“资产”路径:

<script src="assets/app.bundle.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="assets/public/style.css">

now, its compile and reload perfectly. 现在,它可以完美地编译和重新加载。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CLI热模块重新加载页面上的webpack-dev-server内联模式将刷新以更改dom - webpack-dev-server Inline mode on CLI hot module reload page will refresh for change dom 重建文件时,Webpack dev服务器不会重新加载页面 - Webpack dev server don't reload page when rebuild file webpack-dev-server 热重载不工作 - webpack-dev-server hot reload not working Webpack-dev-server无法重新加载.html - Webpack-dev-server not reload .html webpack-dev-server热重装无法正常工作? - webpack-dev-server hot reload not working? webpack开发服务器更改根目录 - webpack dev server change root 当 webpack-dev-server 导致页面重新加载时,在 GUI 中重新运行 Cypress 测试 - Re-run Cypress tests in GUI when webpack-dev-server causes page reload webpack-dev-server with hot reload重新加载整个页面并进行css更改 - webpack-dev-server with hot reload reloading entire page with css changes 如何配置 webpack-dev-server 在重新加载之前关闭浏览器上的“beforeunload”事件? - How do I configure webpack-dev-server to turn off “beforeunload” events on the browser before reload? 如何在webpack-dev-server和express服务器上重新加载模块? - How to reload modules on both webpack-dev-server and express server?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM