标签: webpack-dev-server

我正在尝试使用我的Mac中的VirtualBox测试我的Internet Explorer 11的网站兼容性.我使用Webpack-Dev-Server运行本地服务器.

当我通过http://10.0.2.2:8080访问网页时,网站加载正常; 但是检查员小组不断反复抛出此错误:

SCRIPT7002: XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd. 

[WDS] Disconnected!

任何线索如何解决此错误？谢谢!

我有一个基于http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/文章的应用程序.我添加了一些子路由,现在我的路由器配置是这样的:

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  console.log('load route called');
  return (module) => cb(null, module.default);
}

const obj = {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: '/gsgs',
      getComponent(location, cb) {
        System.import('pages/Gsgs')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
      childRoutes: [
        {
          path: 'go',
          getComponent(location, cb) {
            System.import('pages/Gsgs/Home.js')
              .then(loadRoute(cb))
              .catch(errorLoading);
          },
        }
      ]
    },
    {
      path: '/about',
      getComponent(location, cb) {
        System.import('pages/About')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
  ] …

我正在建立一个反应应用程序.我用yeoman来生成react app结构.我使用webpack捆绑所有js文件.我package.json是 -

{
  "dependencies": {
    "axios": "^0.15.0",
    "classnames": "^2.2.5",
    "es6-shim": "^0.35.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-mdl": "^1.7.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "redux": "^3.5.1",
    "todomvc-app-css": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.2.2",
    "babel-core": "^6.13.0",
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.0",
    "babel-plugin-istanbul": "^2.0.1",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.2.0",
    "babel-preset-react": "^6.1.18",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "css-loader": "^0.23.1",
    "del": "^2.0.2",
    "es6-shim": "^0.35.0",
    "eslint": "^3.2.2",
    "eslint-config-xo-react": "^0.7.0",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-babel": "^3.1.0",
    "eslint-plugin-react": "^5.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^4.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": …

所以我设置了webpack webpack-dev-server,但是webpack-dev-server没有自动重新加载.如果我修改文件并保存它,那么在我手动刷新之前,浏览器没有任何变化.

这是我的webpack配置和运行的脚本文件webpack-dev-server.有没有人看到任何可能阻止自动重载工作的东西？

我通过阅读多个教程,文档和阅读react-create-app生成的文件将这些放在一起.

配置/ webpack.config.dev.js

'use strict';

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

const extractSass = new ExtractTextPlugin('style.css');

module.exports = {
    entry : './src/index.jsx',
    eslint: {configFile: './src/.eslintrc.json'},
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                include: ['src'],
                loader: 'babel',
                test  : /(\.js|\.jsx)$/
            },
            {
                exclude: /node_modules/,
                include: ['src']
                loader : extractSass.extract([ 'css', 'postcss', 'sass' ]),
                test   : /\.scss$/
            }
        ],
        preLoaders: [
            { …

我正在使用webpack-dev-server和这个配置:

import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        bundle: `${__dirname}/src/main.ejs`,
        commons: [
            'lodash',
            'webpack-dev-server/client?http://localhost:8090',
            'webpack/hot/only-dev-server'
        ]
    },
    module: {
        rules: [
            {
                test: /\.(js)?$/,
                include: `${__dirname}/src`,
                loader: 'babel-loader'
            }, {
                test: /\.(scss|css)$/,
                include: [
                    `${__dirname}/src`
                ],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            },  {
                test: /\.(ejs)$/,
                include: `${__dirname}/src`,
                use: 'ejs-render-loader'
            }, {
                test: /\.(png|jpg|gif)$/,
                include: [ …

我可以看到,有代理webpack.dev.config.如何设置代理webpack.prod.config？我想调用另一个api域名网址而不是自己的域名网址.

我有以下 webpack 配置：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + '/dist',
    // publicPath: __dirname + '/dist/',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "/dist",
    hot: true,
  } 
}

我的理解是contentBase告诉 webpack 开发服务器从哪里提供文件。因此，如果我转到localhost:8080/test.txt，在此配置下，文件 atmyProjectRoot/dist/test/txt将由服务器发送到浏览器。那是对的吗？这一切有什么output.publicPath关系呢？

现在我已经index.html坐在bundle.js那里了myProjectRoot/dist/。（尽管我认为bundle.js这有点令人困惑，因为它实际上是由 webpack-dev-server 返回的内存包，但尽管如此）。根据我之前的段落，我希望服务器返回index.html到浏览器。由于contentBaseis/dist和index.html在磁盘上的路径是./dist/index.html.

但我却看到：Cannot GET /

所以，如果我再次访问，http://localhost:8080/bundle.js我会看到完整的 javascript 包（与我的文本编辑器中最后保存的内容是最新的）。但后来/index.html赢了Cannot GET /？

我缺少什么？

一旦 webpack-dev-server 启动，控制台将输出：

\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3002/\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\n\xe2\x84\xb9 \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from ...\n

但是，我不愿意向用户显示上述日志，如何隐藏它们？

sudo npm run serve

> frontend@1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve

 INFO  Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
    at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
    at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
    at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
    at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/@vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
    at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
    at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
    at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8) …

npx webpack-dev-server --mode development我正在我的应用程序中运行该命令react并收到上述错误。

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'hotOnly'. These properties are valid:

下面是我的webpack.config.js文件。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }, …