标签: webpack-dev-server

我在浏览器中收到以下错误:

未捕获的错误:不变违规:style支持期望从样式属性到值的映射,而不是字符串.例如,使用JSX时style = {{marginRight:spacing +'em'}}.

这是在运行webpack-dev-server并转到localhost:8080时.

./modules/main.js:

/** @jsx React.DOM */

var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');

var Application = React.createClass({
  render: function() {
    return (
      <div>
        <HoverAction title="favorite" />
      </div>
    );
  }
});


if (typeof window !== 'undefined') {
  React.render(<Application />, document.getElementById('app'));
}

./modules/HoverAction/HoverActions.js:

/** @jsx React.DOM */
'use strict';

var StyleSheet = require('react-style');
var React = require('react');

var HoverActionStyles = StyleSheet.create({
    normal: {
        height: '200px',
        width: '200px',
        border: '1px solid black'        
    }
});

var …

我目前正在尝试使用基于express + webpack-middleware的更强大的解决方案来替换使用webpack-dev-server的旧设置.所以我用它来运行它:"webpack-dev-server --content-base public/--history-api-fallback"但现在我想像这样使用它:"node devServer.js".以下是我当前设置的详细信息.

webpack.config.dev.js:

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

debug.enable('app:*');

var log = debug('app:webpack');

log('Environment set to development mode.');
var NODE_ENV = process.env.NODE_ENV || 'development';
var DEVELOPMENT = NODE_ENV === 'development';

log('Creating webpack configuration with development settings.');
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index',
    './src/scss/main.scss',
  ],
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), …

谁能指引我朝正确的方向发展？

所以我设置了带有松露套件演示的webpack-dev-server,只是为了获得我的应用程序的基础.所以我的配置文件包括index.html和app.js,但它尝试显示一个console.log输出到app.js没有通过控制台显示？

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports =
  {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js',
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime'] …

我一直在使用 create-react-app 和我添加的其他一些库开发一个小应用程序。鉴于计划的架构和一些我想用 react-router 运行的测试，我希望能够使用 url 中的域 mame 在本地运行我的应用程序，这样而不是

本地主机：3000/

这将是

somedomain.com

我已经尝试了一些事情，比如弹出 ceate-react-app 但我不知道如何修改 webpack 配置来改变公共路径，或者如何在我的机器上设置某种代理，这样 somedomain.com 就相当于输入本地主机:3000

我不确定正确的方法是什么，我似乎还找不到任何可靠的信息。

尝试使用 npm run serve（在 iOS 上）运行应用程序时，出现以下错误：

未找到此相关模块：

• ./src/main.js 在 multi (webpack)-dev-server/client? http://10.0.0.5:8081/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

请耐心等待，我是新手。

我尝试了一堆随机的东西，比如检查拼写错误、重新安装 webpack、更新节点等等。我不知道这个错误是关于什么的，所以我不知道在哪里看。

main.js 文件如下所示：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VueGoogleMaps, {
    load: {
        key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
        libraries: "places" // necessary for places input
    }
});

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    beforeCreate() {
        this.$store.commit('initialiseStore');
        this.$store.dispatch('commons/initialize');
    }, …

我试图遵守捆绑生产代码中的 CSP 指令。我们制定了严格的 ContentSecurityPolicy，不允许eval()及其相关项（如setTimeout(String)、setInterval(String)和 ）new Function(String)。因此，我尝试通过webpack.config.js删除此类语句。

我正在使用webpack 4.28.0 ，在网上看到大量指南后，我在webpack.config.js中尝试了以下操作：

mode: 'production',
node: {
  global: false,
  fs: 'empty', // irrelevant for this example I think
}

// rest of code ... 

plugins: [
      new webpack.DefinePlugin({ // This was put in place because before I got window is undefined errors
        global: 'window'
      }),

// rest of code ... 

此外，devtool即使我认为这并不重要，该属性也未设置（根据我在网上找到的一些指南）。

我目前收到有关以下方面的投诉new Function(...)（参见下面的图片）：

这也是 CSP …

我在 Docker 容器内的 Laravel Mix 中设置热模块重新加载时遇到一些问题。

我有以下 Dockerfile：

FROM php:7.4.0-fpm

RUN curl -sL https://deb.nodesource.com/setup_13.x | bash

RUN apt-get update && \
    apt-get install -y -q --no-install-recommends \
    nano apt-utils curl unzip default-mysql-client nodejs build-essential git \
    libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
    libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
    libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \
    echo 'umask 002' >> /root/.bashrc  && \
    apt-get clean

# Docker PHP Extensions
RUN docker-php-ext-install -j$(nproc) iconv gettext gd mysqli curl pdo pdo_mysql zip && \
    docker-php-ext-configure gd --with-freetype=/usr/include/ …

我有一个全局扩展，它定义了一个名为“is”的方法。我遇到的问题是 ESLink 将其标记为“no-undef”；尽管它在运行时可用。
禁用该规则对我来说不是一个选择。我宁愿定义它以便 ESLint 可以看到它。

我的项目使用 NodeJS、Vue、TypeScript、Babel 和 WebPack。这并不重要，但 typescript JavaScript 版本设置为esnext。

以下是我要求您牢记的目标：

1. 除了这个 ESLint 错误之外，没有其他编译或运行时错误
2. 如果我使用它在每个文件的顶部声明我的方法，一切都会正常工作
3. 我希望有一个集中的、简单的方法来为 ESLint 定义它
4. 我没有使用类型定义文件（AKA d.ts），因为你不能这样定义它

// This is my 'is.ts' file; THIS IS NOT THE SAME AS A d.ts FILE
...
function is() { ... }
declare global {
  function is(): boolean { ... }
}

// physically define on window giving my method global scope
const _LocalWindow: any = window;
_LocalWindow.is = _LocalWindow.is || is;

我的应用程序中的其他地方

declare function …

为应用程序使用 Django 和 Vue.js。我在 https://localhost:8000 上运行网站，在端口 8080 上运行前端作为本地 https 网格实例。在设置标头之前，我不断收到每个 HTTP 请求的这种类型的 CORS 错误：

跨域请求被阻止：同源策略不允许在https://u-redwood-testapplicationfrontend.grid.locked.com:8080/sockjs-node/info?t=1594916128605读取远程资源。（原因：CORS 请求没有成功）。[了解更多]

这是通过在 webpack 配置文件中附加以下标头来解决的：

headers: {
   "Access-Control-Allow-Origin" : "*",
   "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
},

我同样添加了带有密钥、证书和证书颁发机构的 https。

在此之后，错误基本上消失了。但是，每当我 Ctrl+C 我的开发服务器时，我都会以 1-2-4-8-16-32-64-128-... 秒的增量出现上述错误，如下所示：

[WDS] 断开连接！

跨域请求被阻止：同源策略不允许在https://u-redwood-testapplicationfrontend.grid.locked.com:8080/sockjs-node/info?t=1594916128605读取远程资源。（原因：CORS 请求没有成功）。[了解更多]

跨域请求被阻止：同源策略不允许读取https://u-redwood-testapplicationfrontend.grid.locked.com:8080/sockjs-node/info?t=1594916128605 上的远程资源。（原因：CORS 请求没有成功）。[了解更多]

跨域请求被阻止：同源策略不允许在https://u-redwood-testapplicationfrontend.grid.locked.com:8080/sockjs-node/info?t=1594916128605读取远程资源. （原因：CORS 请求没有成功）。[了解更多]

这是正常行为吗？这是 CORS 发送的某种 Keep-Alive 吗？

任何帮助，将不胜感激。

谢谢！

信息

我正在尝试生成自己的 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: { …