标签: webpack-dev-server

我想通过使用下面给我的这行代码从我的 webpack 文件中排除它。

noParse: /node_modules\/localforage\/dist\/localforage.js/,

但是无论我尝试什么，我都会不断说错误，例如

ReferenceError：C:/..../node_modules\localforage\.babelrc 中指定的未知插件“add-module-exports”

这是我的 webpack 配置文件：

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

 module.exports = {
   entry: './app/index.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index_bundle.js',
     publicPath: '/'
   },
   devServer: {
    historyApiFallback: true,
  },
   module: {
     rules: [
       { test: /\.(js)$/, use: 'babel-loader' },

       { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: 'app/index.html'
     })
  ]
};

我正在尝试使用动态查询参数代理我的请求，但似乎收到 404 错误或根本没有响应。这是我迄今为止尝试过的：

'/services/app/details.json?id=*': {
    target: 'https://website.com/api/v1/potato/',
    changeOrigin: true,
    secure: true,
    pathRewrite: {
      '^/services/app/details.json?id=': '',
    },
}

我期待来自我的本地机器 ( /services/app/details.json?id=2189)的请求代理到https://website.com/api/v1/potato/2189但似乎id没有附加到目标请求并导致 404 错误。

我尝试使用该bypass方法自己附加 id，而没有给我任何响应对象。

'/services/app/details.json?id=*': {
    target: 'https://website.com/api/v1/potato/',
    changeOrigin: true,
    secure: true,
    pathRewrite: {
      '^/services/app/details.json?id=': '',
    },
    bypass(req, res, proxyOptions) {
      const id = (req.query.id ? req.query.id : '');

      const API = Object.assign({}, proxyOptions, {
        target: proxyOptions.target + id,
      });

      return API.target;
    },
}

有任何人对此有经验吗？

我在开发模式（观察）下使用 webpack-dev-server。每次服务器重新加载时，一些 json 和 js 文件都会挤满我的构建目录，如下所示：

'hash'.hot-update.json

{"h":"05e9f5d70580e65ef69b","c":{"main":true}}

'hash'.hot-update.js

webpackHotUpdate("main",{

/***/ "./client/components/forms/SignIn.js":
/*!*******************************************!*\
  !*** ./client/components/forms/SignIn.js ***!
  \*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, …

我在 React 项目上使用 Webpack，它似乎以一种我不理解的奇怪方式HtmlWebpackPlugin影响了webpack 开发服务器。

它似乎允许我浏览到index.html该文件在代码库中的任何位置，这是单独使用开发服务器无法实现的。

假设我有以下目录结构：

myproj/
  |- package.json
  |- webpack.config.js
  |- src/
    |- index.html
    |- index.jsx

和一个webpack.config.js看起来像这样的文件：

const path = require('path');

module.exports = {
    entry: './src/index.jsx',
   
    devServer: {
        contentBase: __dirname
    }
};

然后我跑webpack-dev-server --mode=development。由于我已devServer.contentBase设置为当前目录 ( myproj) 并且index.html文件在里面myproj/src，因此我必须浏览http://localhost:8080/src/index.html以查看我的 Web 应用程序。如果我尝试浏览，http://localhost:8080/index.html则会得到 404。这对我来说很有意义。

然后我添加了HtmlWebpackPlugin，里面没有改变任何东西webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }) …

我想从我的 .env 文件中获取我的变量，但我总是得到 undefined

这是我的 js 代码：

require('dotenv').config();
class Header extends React.Component{
    constructor(props){...}
    render(){
        console.log("NODE ENV", process.env.NODE_ENV);
        console.log("REACT_APP_MYAPP", process.env.REACT_APP_MYAPP);
        ...
   }
}

这打印：

NODE_ENV 开发

REACT_APP_MYAPP undefined

在我的 package.json 中有：

"scripts":{
      "start" : "webpack-dev-server --config webpack.dev.js",
      "build" : "webpack --config webpack.prod.js"
 }

在我的 webpack.dev.js 中：

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.common.js");

module.exports = merge.smart(common, {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        overlay: {
            warnings: true,
            errors: true
        },
        inline …

webpack-dev-server重新加载 Web 应用程序大约需要一分钟。bundle.js是 4mb 左右 - 我知道这很大，但它是从本地服务器加载的，不应该花那么长时间吗？也不是重新编译的时候。这只是重新加载。因此，即使没有任何更改并且我只是在浏览器中触发刷新，一分钟也是加载包所需的时间。

这可能是什么原因？或者这只是它通常的运作方式？如何解决这样的问题webpack-dev-server？我想找到瓶颈。

我目前正在开发一个使用 Vue.js 作为前端的 Django 项目。我不断收到“[WDS] 断开连接！” 每次刷新页面都会出错。也就是说，该网站功能齐全并且没有问题，但是每次我重新加载页面时都会弹出错误。

[WDS] Disconnected!
close                webpack:///(webpack)-dev-server/client?:172
initSocket           webpack:///(webpack)-dev-server/client/socket.js?:26
dispatchEvent        webpack:///./node_modules/sockjs-client/dist/sockjs.js?:219
_close               webpack:///./node_modules/sockjs-client/dist/sockjs.js?:1097

我在 localhost:8000 上运行网站，在端口 8080 上运行前端作为本地网格实例，并设置了证书文件。

这是正常行为吗？我尝试像某些人建议的那样更新 npm，但这没有任何作用。

任何帮助，将不胜感激 ：）

我被困住了。我需要一些帮助。

我的环境：WSL2

我执行 webpack-dev-server

npm run dev

这是它的日志：

> lecture@1.0.0 dev /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
> webpack-dev-server --hot

? ?wds?: Project is running at http://localhost:8080/
? ?wds?: webpack output is served from /dist/
? ?wds?: Content not from webpack is served from /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "85",
  "ie": "11",
  "samsung": "12"
}

Using modules transform: auto

Using plugins:
  proposal-numeric-separator { "ie":"11" }
  proposal-logical-assignment-operators { "ie":"11", "samsung":"12" }
  proposal-nullish-coalescing-operator { "ie":"11", "samsung":"12" }
  proposal-optional-chaining { "ie":"11", "samsung":"12" } …

我正在学习 Udemy 课程，并尝试让 HMR 使用 webpack 版本 5.67.0 和 webpack-dev-server 4.7.3 运行，但它不起作用。当我修改并保存 CSS 文件时，webpack 正确地重新编译了项目，前端也正确更新，但热模块替换不起作用。它会重新加载整个页面。在我尝试实现该属性之前，HMR工作得很好before。

我已经在兔子洞里呆了两天了，遵循不同的建议，但仍然不起作用。

这是我的webpack.config.js：

const path = require('path')

const postCSSPlugins = [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer')
]

module.exports = {
    entry: './app/assets/scripts/App.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app')
    },
    devServer: {
        watchFiles: ('./app/**/*.html'),
        static: path.join(__dirname, 'app'),
        hot: true,
        port: 3000,
        // liveReload: false
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader', {loader: "postcss-loader", options: {postcssOptions: …

在Webpack 4中，我曾经设置开发服务器的外网URL如下：

module.exports = {
  //...
  devServer: {
    public: 'myapp.test:80'
  }
};

然而，在 Webpack 5 文档中，我找不到这个选项。我该如何配置这个？