首页 文章

webpack-dev-server没有绑定到输出文件

提问于
浏览 次
0

我能够按原样使用webpack.config.js进行webpack，当我在浏览器中查看index.html而不使用webpack-dev-server时，会反映出这些更改 .

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src/client/app/');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public/');


var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: BUILD_DIR,
    filename: 'bundle.js'
  },
  watch: true,
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};
module.exports = config;

当我尝试在我的文件上运行带有监视的webpack-dev-server时，服务识别出已进行保存，返回“已成功编译”，并且应用程序指示它在我的localhost处刷新：8080 / webpack-dev-server /，但不更新输出中指定的bundle.js . 我已经看到很多问题通过包含publicPath键值对来解决，但是我已经包含了这些问题，而且当我的服务器热更新时，我仍然无法看到编辑 .

以下是目录中安装的软件包

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "webpack-dev-server": "^2.9.4"
  }
}

我正在编译的jsx文件是一个简单的第一个反应组件

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p>Hello World!</p>;
  }
}

render(<App/>, document.getElementById('app'));
reactjs webpack webpack-dev-server

1 回答

  • 0

    将您的webpack配置更改为以下内容:(注意：我在此处更改了APP_DIR和BUILD_DIR以进行测试 .

    var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src/');
var BUILD_DIR = path.resolve(__dirname, 'build/');


var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/'
  },
  watch: true,
  module : {
    loaders : [
      {
        test : /\.js?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  devServer: {
    contentBase: APP_DIR
  }
};
module.exports = config;

    请注意，我改变了：

    • output.publicPath ：这是相对于服务器根目录，而不是绝对路径 . 更多信息：What does "publicPath" in webpack do?

    • devServer.contentBase ：我改变了这个，所以当我运行服务器时， /src dir中的html文件会被命中 .

    这应该工作！ =）

    回复于

相关问题