标签: webpack-dev-server

var webpack = require('webpack');

module.exports = {
    // devtool: 'source-map',
    // devtool: 'eval-source-map',
    debug: true,
    devServer: {
        contentBase: __dirname  +'/src/endpoint',
        colors: true,
        noInfo: true,
        host: '127.0.0.1',
        port: 8000,
        inline: true,
        hot: true,
        publicPath: '/static/'
    },
    context: __dirname + '/src',
    entry: {
        app: [
            'es6-shim',
            'reflect-metadata',
            './app/app'
        ]
    },
    output: {
        path: __dirname + '/src/endpoint/static',
        filename: '[name].js'
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: [
                    /node_modules/
                ],
                loader: 'babel',
                query: {
                    stage: 0
                } …

我们有一个中央服务器，我们在上面托管所有开发人员的环境。我们有 nginx 运行，它代理对 uwsgi 应用服务器的请求。

我们现在已经开始使用 webpack，我们最终会为每个开发人员运行 webpack-dev-server。我想要做的是让 webpack-dev-server 在 unix socket 上运行（这样我们就不会占用端口）并通过 nginx 将所有请求代理到这个 webpack-dev-server。

我在 github 上查看 webpack-dev-server 代码，注意到它只接受主机和端口作为选项。

有没有人试过这样做？

我--hot启用了 webpack-dev-server ，它工作得很好......对于 Javascript 文件。如果我：

• /src/someFile.js用代码创建document.write("Foo");
• 添加对我的<script>引用/src/someFile.jsindex.html
• 更改/src/someFile.js为document.write("Bar");
• 我的浏览器立即更新以显示“Bar”而不是“Foo”

但是，如果我有<p>Foo</p>我的index.html文件，并将其更改为<p>Bar</p>，我看不到更改。如果我刷新页面，我确实看到了变化，所以我知道 webpack 正在服务index.html；当我保存文件时，它只是不热交换它。

有谁知道如何修复webpack-dev-server以响应文件更改自动更新我的 HTML？

我正在使用Webpack作为我的React应用程序.

我在我的webpack配置中安装了"File-loader"和"Url-loader".

但是,我不知道如何将图像链接到我的组件.我在'Data.js'文件中保存图像的'src',从那里我将图像的数据传递给react组件.

我的webpack.config.js:

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true, …

当我对组件进行更改时，webpack 会重新编译并响应热交换模块。但是现在我的代码运行n次数n是热模块交换发生的次数。例如，我进行了更改，现在函数运行了两次。我做了另一个更改，函数运行了 3 次。我可以console.log(Date.now())在我的商店的 dispatchToken 中放置一个，我可以看到它是运行n时间。

商店：http : //pastebin.com/PVnyf572

webpack.config.js：http ://pastebin.com/MsziqH9v

我运行 webpack-dev-server webpack-dev-server app/client.js --inline --hot --colors

当我进行复杂的更改时，我经常收到以下错误消息（尽管如果我更改 Store 的第 60 行以将健康状况增加 10 而不是 6，则不会发生这种情况）：

React Hot Loader 似乎没有正确配置。如果您使用 NPM，请确保您的依赖项不会将重复的 React 分发拖到它们的 node_modules 中，并且 require("react") 对应于您渲染应用程序的 React 实例。如果您使用的是 React 的预编译版本，请参阅https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react以获取集成说明。

这个问题与帖子有关：保持 [WDS] 断开连接！错误

我已经根据答案更新了我的 webpack 配置设置，但是我仍然在控制台中出现“[WDS] Disconnected！错误”。

请问有什么建议吗？

webpack.config.js

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


module.exports = {

devtool: "inline-source-map",
entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],
devServer: {
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats: { colors: true }
},
output: {
    path: path.join(__dirname, "./public"),
    filename: "./assets/js/bundle.js"
},
resolve: {
    modulesDirectrories: ["node_modules", "src"],
    extentions: ["", ".js"]
},
module : {
    loaders: [
        { 
            test: /\.jsx?$/,
            exclude: "/node_modules/",
            loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
        }, 
        {
            test: …

我正在尝试为我的应用程序设置路由器，并使基本/入口点正常工作（似乎）。似乎当我尝试开始添加子路由时，它正在中断。我现在有一个非常直接的设置。我正在使用 react + redux，我的渲染看起来像：

 ReactDOM.render(
<Provider store={store}>
     <Router history={browserHistory} >
        <Route path="/" component={comp1.Component}>
            <Route path="test" component={comp2.Component} />
        </Route>
    </Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);

我在 localhost:8080 上运行 webpack 开发服务器，它可以毫无问题地提供第一条路由，但是当我转到 localhost:8080/test 时，我得到了一个Cannot GET /test.

这是我的 webpack 配置：

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

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './client/app.jsx'
  ],
  output: {
    path: path.join(__dirname, ''),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new …

我正在通过使用Webpack，webpack-dev-server和Jest测试套件来进行React项目。我的问题是：如何运行由webpack-dev-server触发的监视脚本，并允许Jest监视我的测试是否失败？

例：

我在我的package.json文件中想过类似的事情：

"scripts": {
  "build": "NODE_ENV=production webpack -p --config webpack.config.js",
  "watch": "webpack-dev-server --progress --colors --hot --inline && npm run test",
  "test": "jest"
      }

显然，这是行不通的。

以下是我的package.json文件和webpack.config.js文件。

package.json

{
"scripts": {
    "build": "NODE_ENV=production webpack -p --config webpack.config.js",
    "watch": "webpack-dev-server --progress --colors --hot --inline",
    "test": "jest"
  },
  "author": "Resultados Digitais",
  "license": "ISC",
  "jest": {
    "transform": {
      ".*": "./node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "unmockedModulePathPatterns": [
      "node_modules/react/",
      "node_modules/enzyme/"
    ]
  }
  . . .
}

webpack.config.json

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

我在开发环境中有跨域问题,webpack-dev-server在端口8080上运行,而后端在端口5000上运行.

1. 后端api方法通过AJAX调用引发CORS错误
2. 单击指向后端api的链接不会传递会话数据

这些问题是可以解决的,但我想知道为什么不打算在生产中发生这种情况(客户端和后端都会使用相同的端口)

可以解决这个问题(例如通过运行dev服务器并在同一端口或任何其他方式表达？)

有没有办法通过使用devtools控制台窗口断开Web套接字与热重新加载我的角度应用程序,对于特定的浏览器选项卡？

我需要将应用程序保持在特定状态,而另一个实例在另一个已启用热重新加载的选项卡中打开.