标签: webpack-dev-server

这有点边缘情况，但了解它会有所帮助。

在使用 webpack-dev-server 开发扩展以保持扩展代码最新时，听“webpackHotUpdate”会很有用

带有内容脚本的 Chrome 扩展程序通常有两个方面：

1. 背景
2. 注入内容脚本

当使用带有 HMR 的 webpack-dev-server 时，后台页面保持同步就好了。但是，内容脚本需要重新加载扩展以反映更改。我可以通过监听来自 hotEmmiter 的“webpackHotUpdate”事件然后请求重新加载来解决这个问题。目前，我以一种可怕且非常不可靠的hacky方式进行这项工作。

var hotEmitter = __webpack_require__(XX)

hotEmitter.on('webpackHotUpdate', function() {
    console.log('Reloading Extension')
    chrome.runtime.reload()
})

XX 仅表示当前分配给发射器的编号。正如您可以想象的那样，每当构建发生变化时，这都会发生变化，因此这是一种非常临时的概念证明。

我想我可以设置我自己的套接字，但这似乎有点矫枉过正，因为事件已经被转移，我只是想听听。

我最近才对 webpack 生态系统更加熟悉，因此非常感谢任何指导。

我有一个webpack(v3.5.6) 构建，使用html-loader多个 HTML 文件并将其处理到自身中，使用 .html将较小的图像嵌入到 HTML 中url-loader。该配置非常适合构建，但在使用Webpack Dev Server(v2.7.1)时失败，因为Webpack Dev Server似乎没有忽略源 HTML 文件中的注释。它试图从 HTML 的注释部分获取资源，而其中一些资源此时不存在。

这是来自的示例错误Webpack Dev Server：

./about-us.html 中的错误
找不到模块：错误：无法解析“C:\Users\usr\dev\www”中的“./img/old-image.png”
 @ ./about-us.html
 @ ./entry.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js

我的（未完成的）webpack配置如下：

webpack.common.js：

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

const CleanWebpackPlugin = require('clean-webpack-plugin');

const env = process.env.NODE_ENV;

模块.出口 = {
  条目：'./entry.js',
  输出： {
    路径：path.resolve(__dirname, 'dist'),
    文件名：'bundle.js'
  },
  模块： {
    规则：[{
        测试：/\.html$/,
        用： [
          {
            加载器：'文件加载器'， …

鉴于此配置：

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: path.join(__dirname, 'dist'),
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./dist",
    // hot: true,
  } 
}

为什么 webpack-dev-server 不能正确地为我的应用服务？我对 localhost、vs localhost/webpack-dev-server、vs publicPath、vs contentBase 等的理解为 0%。我知道所有这些路径，并且配置键对于正确设置我的项目很重要，但尽管阅读了数小时他们，他们仍然像我开始时一样混乱。

如果我去，localhost:8080/webpack-dev-server我Get http://localhost:8080/bundle.js会在控制台中看到net:ERR_ABORTED`。

我是 React 的新手，我关注了Facebook 的安装（创建新应用程序）。

所以每次我需要运行应用程序时，它都需要启动一个服务器。当我尝试在 chrome 中打开构建版本（直接打开 HTML）时，没有显示任何内容。

然后我尝试使用codecademy教程从头开始设置 React 环境。在这里，我建好项目后，可以直接用chrome打开html，显示内容。

我的问题是：

为什么网页没有在第一种方法中显示，而第二种方法在不启动服务器的情况下运行？

编辑：

第二种方法的package.json：

{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

webpack.config.js :

var HTMLWebpackPlugin = …

我有一个带有 webpack-dev-server 的 webpack 配置文件，如下所示。

const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    compress: true,
    host: '0.0.0.0',
    port: 3000,
    publicPath: '/static/js/',
    proxy: {
        '**': {
            target: 'http://localhost.idincu.net:8080',
            secure: false,
            prependPath: false,
            proxyTimeout: 1000 * 60 * 10
            }
        }
    },
    plugins: [
        new webpack.NamedModulesPlugin()
    ]
}

现在，ECONNRESET当我使用代理向后端服务器发送请求时，我得到了。发生这种情况的原因可能timeout是 webpack-dev-server 的设置。

我已经深入研究了这一点，以更改 webpack-dev-server 的超时设置。但我失败了。谁能给我一些建议？

我发现的其中一种方法是在 express 上设置超时。或者，如果有一种方法可以使用与我的配置文件相对应的 devServer.before 属性，这对我来说将是一个好方法。

先感谢您。

我们的 Web 应用程序具有以下结构：

/src(.sln)
--/ClientSite
--/AdminSite
--/SharedWeb

在SharedWeb我们有以下文件夹：

--/Client
--/Admin
--/Shared

我们有这个结构，以便webpack-dev-server无论我们编辑什么文件都可以热重载，并且只有一个package.json等。如果有人感兴趣，我们为什么选择这个结构的主题：

共享 React 前端组件 -> 使用 TypeScript 分离项目 -> Visual Studio 2017

到目前为止一切正常，但现在我们需要部署我们的解决方案，我们需要将其导出bundle.js到正确的站点。

在webpack.client.config.js：

热重载工作正常，但脚本文件未正确导出到站点：

output: {
    filename: "./Scripts/dist/[name].bundle.js",
},

脚本文件已正确导出，但热重载停止工作：

output: {
    filename: "../ClientSite/Scripts/dist/[name].bundle.js",
},

根据文档使用路径和文件名的正确方法，没有任何效果：

output: {
    path: path.resolve(__dirname, "Scripts/dist/"),
    filename: "[name].bundle.js"
}

脚本文件已正确导出，但热重载不起作用。如果我使用webpackwith--watch并手动重新加载webpack-dev-serverURL，我可以看到更改，但它不会自动重新加载。

output: {
    path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
    filename: "[name].bundle.js"
},

我正在使用 Webpack 3.8.1 和 webpack-dev-server 2.9.2。这是我在 React 中编写的一个项目。下面是我的 webpack.config 文件。每次运行构建命令时，都不会传输到 dist 目录中的 index.html 文件。当我进行生产构建时也会发生这种情况。我可以将该行写入 index.html 文件，但每次重建时都会删除该行。有任何想法吗？

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  entry: {
    app: './src/index.js',
    vendor: ['react']
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      title: 'Production'
    }),
    new ExtractTextPlugin({
      filename: 'styles.css'
    }),
    new webpack.HotModuleReplacementPlugin({
      multiStep: true
    })
  ],
  output: {
    path: …

我正在尝试favicon使用index.html它的模板加载 aHtmlWebpackPlugin但它没有加载。

这就是我的Webpack配置的样子：

'use strict'

const webpack = require('webpack')
const { join, resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: join(__dirname, 'src', 'index'),
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  },
  devServer: {
    contentBase: resolve(__dirname, 'build')
  }, …

我收到 css loader invalid 选项的错误，我的 webpack.conifg.js 代码如下：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html"
});

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve('dist'),
        filename: 'bundled.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName:"[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            { 
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/, …

预先感谢您帮助我。

我想根据目录内的更改创建产品构建src。为此，我使用watch了 npm 包。下面是我的“脚本”里面package.json

"scripts": {
    "webpack-dev-server": "webpack-dev-server",
    "dev": "watch 'npm run prod' src",
    "prod": "webpack --mode=production"
},

现在当我运行npm run dev命令时。它给了我：

错误： ENOENT：没有这样的文件或目录，stat 'E:\projects\chatapp\run'