标签: webpack-dev-server

我已经安装了react-hot-loader并在webpack.config.js中引用了该模块.但是,当我尝试运行webpack来编译脚本时,我收到一个错误.

请看下面的截图.有人可以告诉问题是什么.仅供参考,我正在使用所有最新的图书馆.

 [1]: http://i.stack.imgur.com/2GCa1.jpg

    /*webpack.config.js
    module.exports = {
devtool: 'eval-source-map',
entry: {
    main: [
        './src/main.js'
    ]
},
output: {
    filename: './public/[name].js'
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: ['react-hot','babel-loader'],
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
}

/*UPDATE*/
Code update
I have added an "s" after loader. It is now giving me the below error.

[2]: http://i.stack.imgur.com/LL1nn.jpg

我似乎无法让webpack-dev-server for webpack2工作.

我正在使用的版本: webpack@2.1.0-beta.25&webpack-dev-server@2.1.0-beta.10

我得到以下CLI日志:

 http://localhost:8080/
webpack result is served from /
content is served from /var/www/homelyfe/hl-app/app/index.js
Hash: 2830dae8362c968c034c
Version: webpack 2.1.0-beta.25
Time: 544ms
       Asset       Size  Chunks             Chunk Names
run.build.js    47.6 kB       0  [emitted]  app
  index.html  198 bytes          [emitted]  
chunk    {0} run.build.js (app) 43.4 kB [entry] [rendered]
    [0] ./app/index.js 69 bytes {0} [built]
    [1] (webpack)-dev-server/client?http://localhost:8080 4.14 kB {0} [built]
    [2] ./~/punycode/punycode.js 14.7 kB {0} [built]
    [3] ./~/querystring-es3/index.js 127 bytes {0} [built]
    [4] ./~/url/url.js 23.3 kB {0} [built] …

我是React + Webpack的新手.作为教程的一部分,我编写了一个webpack.config.js文件.这是文件内容:

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

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve:{
        moduleDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    }
    module:{
        loaders:[
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot','babel?presets[]=react,presets[]=es2015']
            }
        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

我在第19->行遇到了意外的标识符错误 module:{...},

错误详情:

/home/adi/testcode/webpack.config.js:19
    module:{
    ^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32) …

我的包json中有这个：

webpack-dev-server --config config/webpack.config.js --port 80

我也尝试过将端口添加到配置中，如下所示：

devServer: {
  historyApiFallback: true,
  host: '0.0.0.0',
  port: '80',
},

它给出了相同的错误：

webpack-dev-server --config config/webpack.config.js --port 80

loader option has been deprecated - replace with "use"
events.js:163
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 127.0.0.1:80
    at Object.exports._errnoException (util.js:1034:11)
    at exports._exceptionWithHostPort (util.js:1057:20)
    at Server._listen2 (net.js:1257:19)
    at listen (net.js:1306:10)
    at doListening (net.js:1421:7)
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:10)

对我做错事情的任何帮助，或与错误有关的任何帮助。谢谢

我尝试将我的“ http：// localhost：3000 / api / ”路径重定向到在apache服务器中运行的“ http://example.com/api/ ”。

这是我的devServer配置：

devServer: {
    publicPath: '/build/',
    port: 3000,
    proxy: {
        '/api': {
            target: 'http://gestios.loc/api'
        }
    },
    historyApiFallback: true
}

当我尝试访问http：// localhost：3000 / api / calltek / apps？permalink = empresas时，收到404错误。

Request URL:http://localhost:3000/api/calltek/apps?permalink=empresas
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:3000
Referrer Policy:no-referrer-when-downgrade

HTTP/1.1 404 Not Found
X-Powered-By: Express
date: Fri, 05 May 2017 18:13:42 GMT
server: Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.6.28
vary: accept-language,accept-charset
accept-ranges: bytes
connection: close
transfer-encoding: …

更新我的角度/ cli后.我收到无效的主机头.我可以通过修改来解决它Server.js file under line no: 402 to if(this.disableHostCheck) return true; to return true但是还有其他方法可以解决这个问题,因为node_module中的更改不是好方法.

我甚至尝试过ng serve --host 0.0.0.0我仍然有同样的问题.

注意:我使用docker容器进行部署.

任何帮助都非常感谢.

我试图让我的应用程序在Node和Webpack-Dev-Server的开发模式下工作.当我提供'/'时,我完全恢复了我想要的东西.但是,当我'/ test'时,我得到'没有这样的文件或目录'.我在Webpack的网站和React Router Training上阅读了很多文档,似乎没有人真正回答这个问题.我希望能够使用browserHistory而不是hashHistory(我仍在使用React-Router v3).

的package.json:

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rimraf dist",
    "build": "NODE_ENV=production npm run clean && webpack -p",
    "dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.26.1",
    "express": "^4.14.0",
    "html-webpack-plugin": "^2.26.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^4.4.1",
    "react-router": "^3.2.0",
    "redux": "^3.3.1",
    "redux-promise": "^0.5.3",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^3.8.1"
  },
  "devDependencies": {
    "nodemon": …

我正在使Web应用程序使用react和php，并且我正在将webpack用于es6到js，所以我生成了文件，但是我对webpack输出bundle.js文件有问题。

这是我的webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.jsx'
  ],
  output: {
    path: '/dist',
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }
    }, {
      test: /(\.css|.scss)$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader"
      }]
    }]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

这是我的package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": …

我正在使用Web Pack在服务器上的管道上构建我的React代码。但是最近发生了重大变化，现在一切都坏了。这是我用的：

npm install -g webpack

但是我需要像这样用版本全局安装webpack：

npm install -g webpack 1.14.0

我怎样才能做到这一点？

我使用的Symfony与喝采，并通过阅读后这个文章，它说，更改后重新启动安可，但我找不到命令这样做。我尝试设置nodemon来观看webpack.config.js并抛出错误

yarn run v1.9.4
$ nodemon --watch webpack.config.js ./node_modules/.bin/webpack-dev-server
[33m[nodemon] 1.18.3[39m
[33m[nodemon] to restart at any time, enter `rs`[39m
[33m[nodemon] watching: webpack.config.js[39m
[32m[nodemon] starting `node ./node_modules/.bin/webpack-dev-server`[39m
[31m[nodemon] app crashed - waiting for file changes before starting...[39m

和

throw new Error(`Encore.${prop}() cannot be called yet because the runtime environment doesn't appear to be configured. Make sure you're using the encore executable or call Encore.configureRuntimeEnvironment() first if you're purposely not calling Encore directly.`);

我感觉好像缺少一个简单的命令，但似乎找不到。这就是我在package.json中使用的

   "start": "nodemon --watch webpack.config.js ./node_modules/.bin/webpack-dev-server",