标签: webpack-dev-server

我需要为我的 webpack 开发服务器路径设置标头，但是正如您所看到的此配置，我必须为我想要指定的每个 url 复制代理配置，有什么方法可以干燥此配置吗？

  devServer: {
port: 3120,
host: "10.0.0.46",
publicPath: "http://10.0.0.46:3102/dist/js/",
hot: true,
compress: true,
contentBase: path.join(__dirname, "public"),
proxy: {
  "/customer/x": {
    target: "http://localhost:3100",
    secure: false,
    onProxyReq: function (proxyReq, req, res) {
      proxyReq.setHeader('X-Forwarded-User', 'user');
    }
  },
  "/cluster/**": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  },
  "/server/**": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, res) {
        proxyReq.setHeader('X-Forwarded-User', 'user');
      }
  },
  "/data": {
      target: "http://localhost:3100",
      secure: false,
      onProxyReq: function (proxyReq, req, …

我正处于将我的一个旧项目从 Webpack 3 更新到 4 的噩梦过程中，它引入了一整套需要修复的事情。迄今为止最烦人的肯定是从 webpack-dev-server 切换到 webpack-serve，因为它缺乏实际示例。考虑到这一点，我该如何使用它？

使用 Webpack 4.14.0 和 Webpack-Serve 1.0.4。

我的 webpack.config.js 有以下 webpack-dev-server 选项：

devServer: {
      contentBase: path.join(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
}

我还没有看到历史或公共路径的选项，所以我想我只需要内容配置选项。

所以根据我应该做的文档：

serve({
    content: path.join(__dirname, 'public')
});

但是我把这个放在哪里？Github README 声称最常用的是放置它，webpack.config.js但这似乎是错误的，因为该示例也这样做：

const serve = require('webpack-serve');
const config = require('./webpack.config.js');

serve({ config });

我真的将配置文件导入到自身中吗？

我很欣赏一个例子。谢谢。

我使用 create-react-app 创建了一个应用程序，并且webpack-dev-server使用 React-scripts 加载dev-server。问题是我无法通过其他 LAN PC 访问开发服务器。知道如何解决这个问题吗？我还有一个.env文件，其中我将默认主机名更改为domain.com。

例如，我想通过我的 iPad 访问开发服务器。之前我只是输入了 PC 的 IP 和端口，就可以了。

我将不胜感激任何帮助

我正在使用 webpack 来测试我正在编写的代码生成库的输出：https : //github.com/Neone-character-creator/app-generator/blob/master/project-template/webpack.config.js

该库将文件复制到一个新目录中，然后 webpack 为它们提供服务。

最终结果会将 Web 应用程序打包为注入服务器的 Java jar，前端将选择它应该显示的内容并将其嵌入到 iframe 中。我试图模拟这一点，我在其中显示 demo.html，其中包含一个加载 的 iframe，sheet.html加载app.bundle.js.

当开发服务器正在运行并且我更改了一些文件并重新调用库时，更新的文件被移动到位，在控制台中我可以看到 webpack 执行重新编译。

然而，当我查看编译后的包时，它实际上并没有改变，即使包的源文件不同。我必须重新启动服务器才能使包真正更新。

const path = require("path");

module.exports = {
    "mode": "development",
    "entry": "./src/main/resources/scripts/app.js",
    "output" : {
        path: path.resolve(__dirname, "src/main/resources/scripts/"),
        filename: "app.bundle.js",
        publicPath: "/src/main/resources"
    },
    devServer:{
        before: function(app, server){
            app.use("/templates/sheet.html", function(req, res) {
                const resourcePath = path.resolve(__dirname + "/src/main/resources" + req.baseUrl);
                res.sendFile(resourcePath);
            });
            app.use(/\/scripts\/.*/, function(req, res) {
                const resourcePath = path.resolve(__dirname + "/src/main/resources" + req.baseUrl);
                res.sendFile(resourcePath); …

我正在尝试设置BrowserSync以处理我的Laravel项目。但是，当我运行时npm run watch，localhost:3000不会加载。我在终端中没有收到任何编译错误。有趣的是，UI 仪表板localhost:3001运行良好。

如果我运行php artisan serve，localhost:8000加载正常，但当然，它与BrowserSync.

我的webpack.mix.js文件看起来像这样：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({proxy:'localhost:3000'});

我正在使用以下版本：

Laravel-Mix: 4.0.7

browser-sync: 2.26.7

webpack-dev-server: 3.8.0

browser-sync-webpack-plugin: 2.0.1

有什么想法吗？

我在 webpack 中运行构建生产时遇到问题。但是当我使用 dev-server 运行时，更多的代码不会出错。请帮忙..我必须完成我的最后一个项目，它必须在生产模式下运行良好。我希望我能从你们那里得到解决方案。

这是我在运行构建时的错误：

    /MovieDB/node_modules/jest-worker/build/WorkerPool.js:25
      } catch {
              ^

    SyntaxError: Unexpected token {
        at NativeCompileCache._moduleCompile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
        at Module._compile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
  ...
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这是我的 webpack.common.js：

const path = require('path');
const webpack = require('webpack');
const HtmlPackPlugin = require('html-webpack-plugin');
const terserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { …

我有一个带有 React/webpack 前端和 Django/python 后端的应用程序。它过去已成功部署到 heroku。自从我在应用程序中做任何事情以来已经有一段时间了，在最近的一些更新之后，我想更新已部署的版本。Heroku 报告应用程序部署成功，但当我尝试访问它时，出现错误：

拒绝执行来自 'https://pairshead-2020.herokuapp.com/bundle.js' 的脚本，因为其 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

这是我的 webpack.config.js：

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

module.exports = {
  entry: './src/app.js',
  context: path.resolve(__dirname, 'frontend'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'frontend/dist'),
    publicPath: '/'
  },
  devtool: 'source-maps',
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.woff2?$/, …

我使用 Electron-forge 创建了一个应用程序npx create-electron-app electron --template=webpack。

然后我做了npm install webpack-dev-server

在我的 webpack.renderer.config.js 中，我开始添加一个带有proxy和before部分的 devServer 部分，但是当我使用npm run start这些部分时，它们会被忽略。

npm run start 运行electron-forge start，这就是我认为问题所在，因为我无法直接访问 webpack 调用以获得webpack serve ...

让 webpack 开发服务器与 Electron 一起运行需要什么？

我一直在网上关注本教程：https://www.youtube.com/watch?v =TOb1c39m64A 。

大约 10 分钟后，我们将首次启动 webpack 开发服务器。我这样做，当我访问： http://localhost:8080/ 我收到一个白色网页，其中只有文本Cannot GET /。

这些是迄今为止我安装的唯一软件包：

"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }

我有一个名为“start”的脚本webpack serve，它运行成功并显示：

<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/

根据教程，我没有 webpack 配置，但是我在其他编码项目中搞乱了其他 webpack 内容，其中之一是否可以使用我的 8080 端口？我主要在 Firefox 中工作，但这个问题在所有浏览器中都存在。

我还查看了我的主机文件并添加了一行，如果您认为它可以帮助我将其粘贴到这里。

按照这里的要求是我的 package.json （其中大部分已经在上面发布）：

{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

我试图为我的个人项目组织一个webpack 2模板,webpack-dev-server并使用npm命令运行它,但我收到此错误:

Configuration file found but no entry configured.

这很奇怪,因为条目是定义的,我测试了解析的路线,没关系,所以这里是我的webpack配置,运行它的命令和配置加载器的文件:

webpack.config.dev.js

const path       = require('path');
const fs         = require('fs');
const configs    = require('./dev-wpk-conf');
const HtmlPlugin = require('html-webpack-plugin');
const Dotenv     = require('dotenv-webpack');
const webpack    = require('webpack');
const dirPath    = fs.realpathSync(process.cwd());

const config = {
  entry: {
    bundle: path.resolve(dirPath, '../src/index.js'),
    vendor: configs.vendor
  },
  output: {
    path: path.resolve(dirPath, '../dist'),
    filename: '[name].[hash].js'
  },
  devServer: {
    port: 3030
  },
  module: {
    rules: [
      configs.jsonLoader,
      configs.babelLoader,
      configs.imgLoader,
      configs.sassLoader
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ …