是否可以在webpack开发服务器中代理websocket连接？我知道如何将常规HTTP请求代理到另一个后端,但它不适用于websockets,大概是因为代理配置中的目标以http://开头...

我使用以下命令从Windows控制台运行webpack-dev-server:

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

在此之后,我看到了消息webpack: bundle is now VALID.,我无法在那里输入任何内容.但是,如果我在webpack.config.js中更改某些内容,我必须关闭控制台,再次打开它并启动webpack-dev-server以应用我的更改.如何在没有关闭控制台的情况下停止webpack dev服务器？

我有以下结构:

node_modules
  - my_component
    - font
    - scss
      - my_component.scss
src
  - my_app.js
  - my_app.scss

我正在尝试导入样式my_component.scss.该文件包含@font-face引用的声明../font/.所以类似于:

// my_component.scss
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: $weight-medium;
  src: url('../font/font-file.eot');
}

在my_app.js我需要与之关联的SCSS文件.所以

// my_app.js

require('./my_app.scss');

//other app-specific code

我是my_app.scss,我正在进口my_component.scss:

// my_app.scss

import 'my_component';

并sassConfig设置为解析,node_modules/my_component/scss以便导入工作.

我的loader配置使用sass-loader,resolve-url-loader和css-loader.这是一个片段:

//loaders.js

loaders.push({
  test: /\.scss$/,
  loader: 'style!css?sourcemap!resolve-url!sass?sourceMap'
});

这是我观察到的:

1. 当我运行时webpack-dev-server,url引用正确解析
2. 但是,当我webpack使用相同的conf文件运行时,我进入 …

我正在使用webpack和React与react-css-modules和scss文件.当我尝试构建它时,每个导入scss文件的文件都会出现错误 -

ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined

我用谷歌搜索了一整天,没有在哪里!请帮忙!

这是我的webpack设置:

var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: __dirname + '/dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    watchOptions: {
        poll: true
    }, …

我正在运行一个快速服务器,它将充当我的React应用程序的API,该应用程序由webpack-dev-server捆绑并提供服务.

我正在尝试让热模块替换工作,并且几乎在那里,当我对我的文件进行更改时,我在控制台中得到了这个:

但除非手动刷新,否则永远不会重新渲染应用程序.不知道这是否相关,但是当我更新我的.scss文件时,它会刷新而不会手动这样做,并且更新如我所料.

版本:

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

我尝试了最新的webpack,但它给了我无法克服的验证错误.

我通过:运行webpack "webpack": "webpack-dev-server --port 4000 --env.dev",我的快速服务器正在运行http://localhost:3000.

这是我的webpack.config.babel.js:

const webpack = require('webpack');
const { resolve, join } = require('path');
const { getIfUtils, removeEmpty } = require('webpack-config-utils')

const getEntry = (ifDev) => {
  let entry

  if (ifDev) {
    entry = {
      app: [
        'react-hot-loader/patch',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:4000/',
        './js/index.js'
      ],
      vendor: ['react']
    }
  } else {
    entry = {
      bundle: './js/index.js',
      vendor: ['react']
    }
  }

  return …

我将我一直在研究的项目迁移到Webpack 2,这一直很令人头痛.但我已经让我的项目使用Webpack dev服务器进行预览,除了它不会显示我的图像.我得到的只是浏览器控制台中的这个错误GET http://localhost:8080/logo.jpg 404 (Not Found)

并在MacOS控制台中:

   ERROR in ./js/components/Global/Menu.jsx Module not found: Error: Can't resolve 'logo.jpg' in '/Users/user1/Documents/AAA/app/js/components/Global'

这是我的Webpack配置:

    const path = require('path');

    module.exports = {
      context: __dirname + "/app",

      entry: {
        app: "./js/app.js",
        javascript: "./js/app.js",
        html: "./index.html",
      },

      output: {
        //output.path: "[name].js",
        path: __dirname + "/dist",
        filename: "[name].js"
      },

      resolve: {
        alias: { 'react/lib/ReactMount': 'react-dom/lib/ReactMount' },
        extensions: [ '*', '.js', '.jsx', '.json'],
        modules:[__dirname, './app/js', 'node_modules'],
      },

      module: {
        rules: [
          {
            test: /\.jsx?$/,
            include: [
              path.resolve(__dirname, …

我正在阅读这个webpack教程:

https://webpack.github.io/docs/usage.html

它说它捆绑了src文件和node_modules.如果我想在那里添加另一个.js文件,我该怎么做？这是第三方文件,它不是源的一部分,也不是node_modules文件的一部分.这是我目前的webpack.config.js:

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

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './app/app.js'
    ],
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "dist.js",
        sourceMapFilename: "dist.map"
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        }),
    ],
    module: {
        loaders: [{
            loader: 'babel',
            exclude: /node_modules/
        }]
    },
    devServer: {
        inline: true
    },
    node: {
        fs: "empty"
    },
    watch: false
}

问题

将webpack当前在本地运行的项目转换为在docker容器内运行.这项工作分为两个git部分:develop和containers.

本地(无容器)

develop是稳定的基地,通过$ yarn install && npm run dev以下方式在本地运行 package.json

"scripts": {
    "start": "node .",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "predev": "npm run prebuild",
    "dev": "npm run env:dev -- webpack-dev-server",
//[...]
}

分支develop确实包括yarn.lock,虽然FWIW,$ rm yarn.lock && yarn install --force && npm run dev确实正确地启动了服务器,即GET http://localhost:3000给我主页,正如我期望看到的那样.以上都是一样的$ git checkout containers

搬运工人

关闭本地开发服务器后,我运行$ git checkout containers,并且此分支不包含yarn.lock或 …

我越来越喜欢的消息[HMR] Waiting for update signal from WDS...和[WDS] Hot Module Replacement enabled.在开发工具的控制台两次。这是为什么？难道我做错了什么？

我的webpack.config.js档案：

...
module.exports = () => {
    return {
        entry: {
            bundle: './src/app/App.jsx',
            sw: './src/app/sw.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist'),
            globalObject: 'this'
        },
        devtool: 'source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            historyApiFallback: true
        },
...
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        }
    };
};

版本："webpack": "^4.27.1"，"react-hot-loader": "^4.6.0"，"webpack-dev-server": "^3.1.10"

信息

我正在尝试生成自己的 webpack 配置，但在使其正常工作时遇到一些问题。

问题

当尝试使用优化将文件分割成块时，我收到如下错误

错误：冲突：多个块将资产发送到相同的文件名 static/js/bundle.js （块 main 和vendors-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2）

如果我删除优化部分，它可以工作，但不会分块。我查看了 create React app webpack.config.js以获取在生成此内容时引用的内容。

正如您所看到的，他们有优化部分，可在开发和生产中进行分块。为什么我在使用的时候会出现冲突错误？

代码

我的配置的缩小/简化版本（禁用了runtimeChunk，因为它也给出了相同的冲突错误）

webpack.config.js

module.exports = () => {
    process.env.NODE_ENV = "development";
    process.env.BABEL_ENV = "development";

    return {
        mode: "development",
        entry: ["react-hot-loader/patch", "./src"],
        output: {
            path: undefined,
            publicPath: "/",
            filename: "static/js/bundle.js",
            chunkFilename: "static/js/[name].chunk.js",
        },
        optimization: {
            minimize: false,
            splitChunks: {
                chunks: "all",
                name: false
            },
            // runtimeChunk: {
            //     name: (entrypoint) => `runtime-${entrypoint.name}`,
            // },
        },
        resolve: {
            modules: [path.join(__dirname, "src"), "node_modules"],
            alias: { …