webpack-dev-server 未绑定到输出文件

Posted 2023-02-22

【中文标题】webpack-dev-server 未绑定到输出文件

【英文标题】：webpack-dev-server not bundling to output file

【发布时间】：2018-04-21 18:29:01

【问题描述】：

我能够按原样使用我的 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'));

【参考方案1】：

将您的 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 目录中的 html 文件会被命中。

这应该可以！ =)

【讨论】：

我必须更改公共路径以匹配 BUILD_DIR，但其他更改有效！非常感谢！