标签: webpack-dev-server

我正在运行此命令以尝试生成生产 webpack 构建：

rimraf ./build/* && webpack -p --progress --config webpack.production.js

但是，当我打开时build/index.html，它无法加载大量文件，因为位置已关闭。

1. 它无法为bundle.js文件放置正确的位置。它加载这样的：/bundle.js。但是，该bundle.js文件实际上index.html与构建文件夹中的文件位于同一目录中，因此它应该像这样加载它./bundle.js
2. 如果我更正bundle.js路径，它仍然为资产设置了错误的路径：

有趣的是，当我运行时，我的应用程序当前可与 webpack 开发服务器一起使用：webpack-dev-server --inline --progress --config webpack.dev.js.

这是我当前webpack.production.js文件的样子：

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {  
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
  },
  entry: [
    './src/scripts' // This is where …

我正在使用webpack 3& 尝试使用string replace loader。

此代码用于在 webpack1.X 中工作

module: {
    loaders: [
      {
        test: /fileName\.js$/,
        loader: 'string-replace',
        query: {
          search: 'jQuery',
          replace: 'window.$'
        }
      }
    ]
  }

我也试过这个：

module: {
        loaders: [
          {
            test: /fileName\.js$/,
            loader: 'string-replace-loader',
            query: {
              search: 'jQuery',
              replace: 'window.$'
            }
          }
        ]
      }

我需要做什么来确保这个加载器在 webpack 3 中工作。没有错误，但字符串没有在目标文件中被替换。

我正在开发一个由 PHP 后端提供服务的 ReactJS-App。在我的本地机器上，我用一个指向我项目根目录的虚拟主机设置了 MAMP，我使用 webpack 来捆绑我的 React-App。

因为我真的很喜欢使用热重载，所以我现在尝试使用 webpack 开发服务器来代理 MAMP 并从其反应热加载功能中受益。

我还没有能够让它工作，我希望有人帮助我进行配置。或者我的方法基本上不起作用？不管怎样，如果你能帮我解决这个问题，我会很高兴的。提前致谢！到目前为止，这是我的 webpack 配置：

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  devServer: {
    port: 3000,
    proxy: {
      '*': {
        target: 'http://my-virtual-host.dev:8888/',
      }
    }
  },
  entry: [
    './src/app.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:3000/build/'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        include: …

根据文件加载器使用文档，我应该能够加载如下图像：

test: /\.(png|jpg|gif)$/,
use: [
  {
    loader: 'file-loader',
    options: {}  
  }
]

后来通过：

import img from './file.png';

这是我的webpack.config.js：

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl-loader'
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: { failOnHint: true } …

我收到这个错误

测试套件无法运行

Your test suite must contain at least one test.

  at node_modules/jest-cli/build/test_scheduler.js:108:22

开玩笑的配置

"jest": {
    "transform": {
      ".*": "./tests/preprocessor.js"
    },
    "modulePaths": [
      "src"
    ],
  "testPathIgnorePatterns": [
    "/node_modules/",
    "/vendor"
  ],
  "testRegex": "\\.spec\\.js"
  }

任何帮助我如何解决这个问题，我错过了一些东西

预先感谢卡洛斯·维埃拉

我正在尝试从此格式重定向网址：

http://localhost:8080/setup/xyz/?code=some-code

对此：

http://localhost:8080/app/#/setup/xyz/?code=some-code

我已经尝试过代理和重写：

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/index.html' },
    { from: /^\/app/, to: '/app.html' },
    { from: /^\/setup/, to: '/app/#/setup' },
  ]

},

但它似乎不起作用。有没有办法使用开发服务器编写 301 重定向？

我试图让我相当典型的 JavaScript (React) 应用程序在 AWS Cloud9 上以开发模式运行。我成功克隆了我的 repo（使用 https ugh），安装了我的 npm 包，并且可以在控制台中运行脚本。但是，我不知道如何在开发模式下运行和访问该应用程序。有大量的文档，但它们似乎都围绕着运行部分跳舞。我的猜测是我需要以某种方式设置自定义主机和端口，但我还需要找到用于查看应用程序运行的 URL。

这是我的 devServer 配置：

devServer: {
  // Display only errors to reduce the amount of output.
  stats: "errors-only",
  host, // Defaults to `localhost`
  port, // Defaults to 8080
  overlay: {
    errors: true,
    warnings: true,
  },
}

我正在使用 webpack 2.7.0 来构建我的 TS + REACT 项目。

它构建得很好，但是在构建时，webpack 卡在了这个问题上：

C:\projects\simba\client>npm run build
> react-redux-typescript-webpack-starter@0.1.0 build C:\projects\simba\client
> bash utils/build.sh

yarn install v1.0.2
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.90s.
yarn run v1.0.2
$ rimraf dist
Done in 0.43s.
{ env: { build: true, sourceMap: true } }
ts-loader: Using typescript@2.7.2 and C:\projects\simba\client\tsconfig.json
Hash: ecd4451df6c56bc75fec
Version: webpack 2.7.0
Time: 104419ms
                                                               Asset       Size  Chunks                    Chunk Names
                                                          index.html  743 bytes          [emitted]
   [0] ./~/react/react.js 56 bytes {0} [built]
  [30] ./~/react-dom/index.js 59 …

我正在通过反应脚本使用 webpack 开发服务器，并且我想使用它通过 Visual Studio Code 提供的调试功能，但是，我有一个非标准设置。我们在 webpack 开发服务器前面有服务，它代理所有请求，将请求与其他服务捆绑在一起，处理安全性等。所以在本地开发中，我打开 localhost:8080，它将所有请求转发到 localhost:8084，它是 webpack 服务器。但是，该服务（在 8080 上）不支持 websocket，因此无法转发它们。我看到 webpack 尝试回退到 iFrame，它适用于重新加载，但似乎不适用于调试。

有没有办法让我明确告诉 webpack 它应该在端口 8084 上连接到 webpack 开发服务器，而不是尝试通过 8080 来连接？我已经使用了我已经PORT=8084 cross-env REACT_APP_VERSION=$npm_package_version react-scripts start在 package.json 中使用的，我认为它通过了端口。但是，问题在于套接字始终对您正在运行的同一主机/端口打开。因此，当我的页面被代理到 时:8080，也尝试打开套接字:8080。我想要的是明确告诉它不要使用8080，但是8084.

其次，通过 iFrame 备份选项无法进行调试是正确的吗？

我一直在使用我自己的手动解决方案（在 Webpack 之外）获取 SVG 文件的文件夹，提取 SVG 文件之间的内容<svg></svg>，构建一个 JSON 文件，然后使用它注入到 React 组件中，以便我可以输出特定的图标可以更好地控制周围的属性。

我遇到了https://github.com/gilesa/svg-to-json-webpack-plugin它实际上对我做了很多相同的事情，这太棒了！但是在尝试使用它时发生了一些奇怪的事情create-react-app，我怀疑是 Webpack 开发服务器。每当我尝试导入生成的.json文件时，开发服务器都会在浏览器中不断刷新。

我在我创建的问题中更详细地介绍了https://github.com/gilesa/svg-to-json-webpack-plugin/issues/1但我尝试调试到底是什么导致了无限循环还没有成功的。Webpack 插件 API 非常棒，所以我在此过程中学到了一些东西，但到目前为止还没有骰子。

理想情况下，如果这是导致观察者再次启动的原因，我希望 Webpack 忽略该特定文件。可能是因为它src正在寻找更改的同一目录中创建一个文件？感谢您在正确方向上的任何帮助！