标签: webpack-dev-server

这是我的webpack.config.js:

var path = require('path');
module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    port: 8080
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

这就是我运行它的方式:

$ webpack-dev-server --watch-poll --progress --colors
$ webpack --progress --colors

我遇到的问题是webpack-dev-server在我的文件夹(不是在build)文件夹的根目录下提供我的预期.但webpack输出捆绑文件build/(我期望).

因此,当我进行构建时,我必须更改脚本scr.

有办法解决这个问题吗？也许只是我的配置不好webpack.config.js.

我正在运行ubuntu BTW.

我正在运行一个快速服务器,它将充当我的React应用程序的API,该应用程序由webpack-dev-server捆绑并提供服务.

我正在尝试让热模块替换工作,并且几乎在那里,当我对我的文件进行更改时,我在控制台中得到了这个:

但除非手动刷新,否则永远不会重新渲染应用程序.不知道这是否相关,但是当我更新我的.scss文件时,它会刷新而不会手动这样做,并且更新如我所料.

版本:

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

我尝试了最新的webpack,但它给了我无法克服的验证错误.

我通过:运行webpack "webpack": "webpack-dev-server --port 4000 --env.dev",我的快速服务器正在运行http://localhost:3000.

这是我的webpack.config.babel.js:

const webpack = require('webpack');
const { resolve, join } = require('path');
const { getIfUtils, removeEmpty } = require('webpack-config-utils')

const getEntry = (ifDev) => {
  let entry

  if (ifDev) {
    entry = {
      app: [
        'react-hot-loader/patch',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:4000/',
        './js/index.js'
      ],
      vendor: ['react']
    }
  } else {
    entry = {
      bundle: './js/index.js',
      vendor: ['react']
    }
  }

  return …

版本

"extract-text-webpack-plugin":"^ 2.0.0-rc.2",

"webpack":"^ 2.2.0",

"webpack-dev-server":"^ 2.2.1"

问题

"extract-text-webpack-plugin":"^ 1.0.1",

"webpack":"^ 1.14.0",

"webpack-dev-server":"^ 1.16.2"

自从升级到版本2后不再能够HMR css/scss,更改样式会触发更改(请参阅下面的输出示例),但是我必须手动刷新页面以查看页面不会自动刷新的更改,如果我创建了更改scss文件后更改为js文件然后更改将反映为js更改触发HMR,其中还包括样式更改,但只更改样式而不更改js需要手动页面刷新.

任何想法,如果我配置了错误或我需要做什么让css/scss HMR工作？

我也在这里发布了这个问题:https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是否是webpack-dev-server问题或者是extract-text-webpack -plugin问题或者只是我做过的事情.

命令运行:

npm run dev

"scripts": {
    "dev": "webpack-dev-server --hot --inline"
  }

升级前配置:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true }); …

我是webpack/reactjs的新手,只需按照这里的教程:https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

然后在我'开始'后,我得到了错误:

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js
Module not found: Error: Can't resolve 'babel' in '/var/www/jay/reactjs/react-app'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel'.
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js

有任何想法吗？

我将项目移动到另一台计算机,运行npm install.项目工作正常除了webpack-dev-server,它会抛出错误

module.js:544
throw err;
^

Error: Cannot find module '../lib/polyfills'
    at Function.Module._resolveFilename (module.js:542:15)
    at Function.Module._load (module.js:472:25)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/project/node_modules/.bin/webpack-dev-server:6:1)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)

缺少什么？

我使用Webpack bundler和Webpack dev服务器进行本地开发.前端位于React.js + Redux中,后端位于Node.js和koajs中.

在后端,我使用passportjs库进行用户身份验证,其他库koa-passport,passport-facebook,passport-google-auth通过Facebook或Google进行身份验证.基本上,我实施了koa-passport-example.

如果我的应用程序想要将用户重定向到Facebook或Google登录页面,Webpack dev服务器会抛出错误:

GET http://localhost:8090/auth/bundle.js net::ERR_ABORTED

Refused to execute script from 'http://localhost:8090/auth/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

如果我通过Webpack生成bundle并将其托管在Node.js服务器上,我不会收到此错误.我需要找出如何设置Webpack开发服务器以摆脱此错误消息.

的package.json

    "scripts": {
    "debug": "./node_modules/nodemon/bin/nodemon.js --inspect ./script/server.js",
    "webpack": "npm run serve | npm run dev",
    "start": "node ./script/server.js",
    "serve": "./node_modules/.bin/http-server -p 8080",
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --hot --inline",
  },
        "dependencies": {
        "@koa/cors": "^2.2.1",
        "actions": …

我在webpack-dev-serverDocker容器中运行。出于开发目的，我将本地目录绑定到Docker容器。据我了解，webpack的标准“监视”功能不适用于Docker，或者至少不适用于与主机绑定的卷。

但是，如果打开轮询（watchOptions.poll: true），则Docker容器会占用大量 CPU。我可以将轮询降低到1000毫秒甚至5000毫秒，但是仍然使用不可忽略的CPU量，足以使笔记本电脑的风扇开始旋转。

是否有通过轮询限制CPU使用率的最佳实践webpack-dev-server？我可以在基于Linux的Docker容器中安装任何东西吗？我尝试安装最新版本的inotify-tools，但似乎并没有解决问题。

我希望我拼写正确。

我用 reactjs 开发了一个前端应用程序。我分发了我用 docker-compose 开发的应用程序。但是在分发时，我遇到了如下错误。你能帮忙解决这个问题吗？

错误 https://ibb.co/YtYywBr

操作系统：Ubuntu 18 lts 节点版本：v12.16.3 NPM 版本：6.14.4 webpack 版本：- webpack-dev-server 版本：- 浏览器：Chrome、opera

webpack 导致的错误。我怎样才能摆脱这个错误？

这是一个错误

代码

docker-compose.yml

 version: "3.7"
 services:
   nginx-prod:
     container_name: nginx-prod
     build:
       context: .
       dockerfile: Dockerfile.nginx
     ports:
       - "80:80"
       - "443:443"
     networks:
      - nginx_network
     volumes:
       - ./certificates:/usr/share/nginx/certificates
       - ./nginx/nginx.conf:/etc/nginx/conf.d/nginx.conf

  web:
    build:
      context: .
      dockerfile: Dockerfile.react
    container_name: web
    expose:
      - 3000
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app

Dockerfile.nginx

 FROM nginx:alpine
 RUN apk add inotify-tools certbot openssl ca-certificates
 WORKDIR /opt
 COPY …

我开始使用 webpack，现在在 publicPath 和 contentBase 之间感到困惑。该文档在用例上不清楚。

我们有一个使用 Typescript 和 Vue 3.1.5 以及 Vue CLI 5.0.0-beta.2 的项目，而 Vue CLI 5.0.0-beta.2 又使用 Webpack 5.47.0。对于开发来说，启动vue-cli-service serve非常慢（有很多依赖项）。所以我们激活了 Webpack 文件系统缓存：

configureWebpack: {
  cache: {
    type: "filesystem",
  },
},

现在它在 Linux 和 MacOS 上运行良好。但在 Windows 上，它通常会在记录异常后刷新整个缓存：

[webpack.cache.PackFileCacheStrategy] 从 C:\Users\Smith\ws\kl\kl-frontend\node_modules.cache\webpack\default-development.pack 恢复包失败：TypeError：无法读取未定义的属性“hasStartTime”

有谁知道问题可能是什么？也许与文件名有关？我们还有一项工作，删除然后重新创建一些 API 文件，通常内容相同。这可以摆脱缓存吗？