标签: webpack-dev-server

我在使用react-router和webpack-dev-server时遇到了一些问题,无法实现嵌套的url路由.

webpack.config.js

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: "/", <-- this enabled routing to /register/step2
    filename: "js/bundle.js",
},

routes.js

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/register/step2', component: SecondStep },
    ]
};

export default (<Router routes={routes} history={createBrowserHistory()} />);

当在appliation中点击时,我可以进入/ register/step2,但是一旦我在浏览器中点击刷新,我的common.js和bundle.js就丢失了:404,因为它试图从/ register /目录加载所有东西.

有人可以帮忙吗？谢谢.

我正在写一个反应应用程序,当我导航到一切正常时localhost:3000,但是当我尝试去时localhost:3000/foo/page,我收到一条错误消息,告诉我localhost:3000/foo/bundle.js无法加载.

对我来说,这似乎是Webpack在bundle.js的错误位置查找的问题,但我不确定.如何让应用程序始终查看localhost:3000bundle.js？

这是我的一些webpack配置.

var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');

process.env.BABEL_ENV = TARGET;
var common = {
    entry: APP_PATH,

    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loaders: ['babel'],
                include: APP_PATH
            },
            {
                test: /\.svg$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            },
            {
                test: /\.png$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            },
            {
                test: /\.ico$/,
                loader: 'url-loader?limit=8192',
                include: APP_PATH
            }
        ] …

我有一个运行Express的节点服务器的webpack配置.如果正在生产中的条目文件运行Express服务器,如果在开发中也运行Express Server和Webpack Dev Server.问题出在webpack开发服务器初始化时; 它抱怨Unhandled rejection Error: invalid argument或没有找到路径.webpack dev服务器中使用的客户端配置在从CLI自己使用时运行良好,当webpackdevserver在常规(非捆绑)文件中初始化时也可以运行.

与每种方法的不同之处在于,从配置打印的路径在工作的情况和不工作的情况之间是不同的.这些路径是从__dirname解析的,在每种情况下都是不同的.为什么会出现这种情况,是否可以获得正常的__dirname路径？

提前致谢.

服务器配置:

{
  target: 'node',
  entry: rootDirectory,
  externals: nodeModules,//readDirSync('node_modules').filter(x => x !== '.bin'),
  output: {
    path: join(rootDirectory, 'build'),
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  plugins: [
    new DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('development'),
        'PORT': 8080,
        'SERVER': true,
        'CLIENT': false
      }
    })
  ],
  node: {
    __dirname: false,
    __filename: false
  }
};

客户端配置:

{
  entry: {
    client: [
      'webpack-dev-server/client?http://localhost:8080', …

我正在导入whatwg-fetch(https://github.com/github/fetch)到我的应用程序中

import fetch from 'whatwg-fetch';

对于我使用的本地开发webpack-dev-server.我收到此错误消息:

 test.js?ba55:67 Uncaught TypeError: (0 , _whatwgFetch.fetch) is not a function

它是从这一行开除的:

fetch('/api/mydata', opts)

为什么导入失败？

这是我的webpack配置:

var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var fs = require('fs'),buildPath='./dist/';
var folder_exists = fs.existsSync(buildPath);

if(folder_exists == true)
{
    require('shelljs/global')
    rm('-rf', 'dist')

};

module.exports = {

    entry: './src/main',

    output: {
        path: path.join(__dirname, './dist'),

        filename: '[name].js',

        publicPath: '/dist/'

    },


    devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true,
    },
    // "vue-hot-reload-api": "^1.2.2",

    module: {

        loaders: [

            { test: /\.vue$/, loader: 'vue' },

            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },

            { test: /\.css$/, loader: …

我搜索过它,找不到任何与此问题相关的内容.

我想要这个的原因是工作流问题.我在chrome canary上设置了一个开发者帐户,并希望将与开发相关的所有内容保存到该浏览器中.

在devServer选项对象中,我可以告诉webpack-dev-server打开"Google Chrome Canary".我使用Mac,如果这有所作为.

我正在通过热模块重新加载 - 开发服务器获得CORS问题.我在端口上使用dev-server 3000但是应用程序是从另一个端口提供的http://localhost:52024/.

这是我得到的错误(Chrome,Windows 10):

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

实际上我遇到两个错误:第一个是由//路径中的双斜线引起的,另一个是与CORS相关的错误.这是我的webpack.config.js:

const webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: …

在React上遇到一点麻烦.有谁知道如何安装webpack@^4.xx的同行？

这是我尝试运行时收到的错误

webpack-dev-server

在cmd.它只是回来了

webpack-cli@3.0.8 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

假设我有一些JSON文件（将其命名为template.json）

{
    "myField1": "",
    "myField2": ""
}

我也有一种通用的课程

{
    "myField1": "",
    "myField2": ""
}

我在Typescript项目中像一种类型一样使用它：

export default GenericClass<T> {
    // Creating an empty constuctor with passed type.
    // to allow define type automatically.
    // This allow us not to manually set generic type for class
    // and also allows Webpack to pick up changes.
    constructor(template?: T) {} 

    // ...some fields and methods

    get typedField(): T {
        return /* something slightly calculated */
    }
}

我正在运行webpack开发服务器，并在某处使用它：

import …

webpack-dev-server error cannot find module 'webpack-cli/bin/config/config-yargs在 yarn 工作区中安装 webpack、webpack-cli 和 webpack-dev-server 时出现错误“ '”。在 repo 中安装它们时没有这个问题。

我检查了根节点和子节点中的 node_modules。看来这个 config/config-yargs 文件安装在CHILD的 node_module 中，但没有安装在ROOT 中。

我必须手动将它从子级复制到根目录才能使其正常工作。

有没有办法正确安装它？

我的根 package.json ：

{
    "private": true,
    "workspaces": [
        "packages/server",
        "packages/front", <-- webpack has been installed her
    ],
    "name": "test",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

子 package.json 的一部分

{
"devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",
        "typescript": "^3.7.5",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
}

webpack.config.js

const …