标签: webpack-dev-server

我将 webpack 与 webpack-dev-server 一起使用。这是 webpack.config.js

当我更改任何文件时，我的项目就会重新编译，这是一个很棒的功能。但我的本地数据库有问题。当一些数据插入数据库时​​，项目将重新编译，这不是所需的工作。

我尝试使用插件https://github.com/christophercliff/watch-ignore-webpack-plugin 进行配置：

new WatchIgnorePlugin([
        path.resolve(__dirname, 'src'),
    ]),

只有这样才有效。它忽略监视 src 文件夹中的所有文件。但我只想忽略 src/data-access 目录中的观看文件。因此，当我尝试将“src”更改为“src/data-access”时，我的所有文件再次被监视，包括 src/data-access。

控制台输出Ignored an update to unaccepted module错误，如何解决？

log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1\nlog.js:25 [HMR] The following modules couldn\'t be hot updated: (They would need a full reload!)\nlog.js:25 [HMR]  - ./src/print.js\n

整个控制台消息是：

log.js:23 [HMR] Waiting for update signal from WDS...\nlog.js:23 [HMR] Waiting for update signal from WDS...\nclient?cd17:64 [WDS] Hot Module Replacement enabled.\nclient?cd17:64 [WDS] Hot Module Replacement enabled.\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:193 …

有没有办法在不运行构建过程的情况下启动 webpack devserver？

我希望它只为我已经构建的静态文件提供服务。这是我的配置：

   devServer: {
    port: 7171,
    inline: true,
    stats: 'errors-only',
    open: false,
    contentBase: path.resolve('static'),
    publicPath: '/app/site/',
    historyApiFallback: {
      index: '/app/site/index.dev.html'
    },
    proxy: {
      '/app/static': {
        target: 'http://localhost:7171',
        pathRewrite: {'static': 'site'}
      }
    }
  }

我正在尝试使用多个域为 webpack-dev-server 设置代理。我们的系统是这样工作的：

• 登录域名.ext
• 项目.域.ext

现在项目在 webpack 开发服务器上运行，而登录是一个 PHP 后端，可以在开发机器上运行。

我设法设置一个代理配置来重定向以在 SSL 上登录并捕获所有返回重定向，以便我可以重新添加端口 8080。

然而，webpack 似乎忽略了域，现在就像将所有内容代理到登录项目一样。

将disableHostCheck 设置为 false 会导致登录域 nog 为有效主机时出现错误。

我在主机名代理上找不到任何内容，我看到的所有配置都是关于路径代理的。但我无法想象自己是唯一一个拥有这样的设置的人。

这是开发服务器配置

import { configPath } from "../vars/paths.config";

const webpackMerge = require('webpack-merge');
const webpack = require('webpack');
import { commonConfig } from './common.config';

const fs = require('fs');

export let developmentConfig;

developmentConfig = {
    devServer: {
        historyApiFallback: true,
        public : 'project.domain.ext.dev1:8080',
        disableHostCheck: true,
        https: {
            key: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.key' ),
            cert: fs.readFileSync( configPath + '/resources/ssl/san_domain_com.crt-extensions' )
        },
        stats: { …

我有这个错误代码。我认为这个错误是由 webpack.config.js 引起的我研究了很多来源但无法得到结果

    ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
    Module parse failed: Unexpected token (7:5)
    You may need an appropriate loader to handle this file type.
    |  */
    | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    | html {
    |   font-family: sans-serif;
    |   -webkit-text-size-adjust: 100%;
     @ ./index.js 21:0-43
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./index.js

我的 webpack.config.js 。我这里已经做了安排。但我又得到了一个错误。我怎样才能克服这个错误

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

        var parentDir = path.join(__dirname, '../');

        module.exports = {
            entry: [
                path.join(parentDir, 'index.js')
            ],
            module: {
                loaders: [{
                    test: …

我有以下 css 文件：

<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">

以及以下 webpack 配置

var path   = require("path");
module.exports = {
  entry: {
    app: './src/index.js'
  },

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js',
  },

  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        test:    /\.html$/,
        exclude: /node_modules/,
        loader:  'file-loader?name=[name].[ext]',
      },
      {
        test:    /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        loader:  'elm-webpack-loader?verbose=true&warn=true',
          options: {debug: true, warn: true},
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      }, …

（我显然还没有完全掌握 Docker 的概念，所以当我错误/不准确地使用术语时请纠正我。）

我的存储空间快用完了，所以我跑去docker system prune清理一下我的系统。然而，在那之后不久（也许是立即），我在容器中启动 Webpack 开发服务器后开始遇到分段错误。我现在的猜测是，这是由于一些 npm 包必须重建，但由于一些旧的文物仍然存在，所以没有这样做？如果我在容器外部运行 Webpack 开发服务器，我不会遇到分段错误：

web_1       | [2] Project is running at http://0.0.0.0:8000/
web_1       | [2] webpack output is served from /
web_1       | [2] 404s will fallback to /index.html
web_1       | [2] Segmentation fault (core dumped)
web_1       | [2] error Command failed with exit code 139.

因此，我想知道是否docker system prune真的删除了与我之前运行的 Docker 映像相关的所有内容，或者是否可以进行一些额外的清理。

我的 Dockerfile 如下，其中./stacks/frontend是运行 Webpack 开发服务器的目录（通过yarn start）：

FROM node:6-alpine
LABEL Name="Flockademic dev environment" \ …

我在网上搜索过，不知道如何在我的反应应用程序中设置 X-FRAME-OPTIONS，web.config.js 看起来像这样，它使用内联选项

当我加载index.html时，它给出响应 X-FRAME-OPTIONS:DENY 我需要它将其更改为 X-FRAME-OPTIONS:SAMEORIGIN，因为我需要在我的应用程序中打开一个 iframe。现在我遇到了 chrome 错误和 firefox 错误。

不知道如何在开发中更新我的 web.config.js，我非常困惑。

module.exports = {
  devtool: 'eval',
  entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://0.0.0.0' + web_port,
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'react-router-dom',
      'react-forms-ui',
      'mobx',
      'mobx-react',
      'sockjs-client',
      'react-table',
      'react-bootstrap-table',
    ],
    fonts: glob.sync("./src/webfonts/*")
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/static/'
  },

我的 webpack-dev-server 工作速度非常慢。我有以下 webpack.config.js 文件：

'use strict';

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

module.exports = {
  entry: {
    wit:    [babel-polyfill',
        './index.js',
        './src/shared/styles.less']  
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    //publicPath: '/',
    filename: 'bundle.[name].js'        
  },  
  module: {
    rules: [
      {
        test: /(\.js[\S]{0,1})$/i,
        exclude: /node_modules/,
        loaders: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-0&presets[]=stage-2']
      },
      {
        test: /\.(htm|html|xhtml|hbs|handlebars|php|ejs)$/i,
        exclude: /node_modules/,
        loader: "file?name=[name].[ext]",
      },       
      {
        test: /\.css$/i,
        exclude: [/node_modules/],
        loader: 'style-loader!css-loader'
      },     
      {
        test: /\.less$/i,
        exclude: /node_modules/,
        use: [{
          loader: "style-loader" // creates style nodes …

使用webpack 4示例实现热模块替换效果非常好，而且我的 React 组件也能顺利渲染。

然而，在最后的 webpack 文档中，提到了react-hot-loader。

任何人都可以解释一下 webpack4 中的 HMR 和使用 react-hot-loader 实现的 HMR 之间的区别吗？实现react redux有什么区别吗