标签: webpack-dev-server

我成功地设置了WebPack - 它正在编译我的babel和SCSS文件就好了,我让手表功能正常工作.但是我也想使用热模块更换 - 而且我遇到了困难.当我在浏览器中加载开发服务器时,它会显示Cannot resolve module 'webpack/hot/dev-server'.我的配置如下所示:

import webpack from 'webpack';
import wpServer from 'webpack-dev-server';

var compiler = webpack({
    entry: [
        './src/core.js',
        'webpack/hot/dev-server'
    ],
    output: {
        path: outPath,
        filename: '[name].js'
    },
    resolveLoader: { root: path.join(MODULE_PATH, "node_modules") },
    module: {
        loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
          { test: /\.scss$/, loader: "style!css!sass" }
        ]
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    watch: true
});

var server = new wpServer(compiler, {
    contentBase: outPath,
    hot: true,
    quiet: false,
    noInfo: false, …

到目前为止,我一直在使用livereload,这样每当我更改JS或模板时,页面都会刷新,当我更改CSS时,它会在没有刷新的情况下热切换新的CSS.

我现在正在尝试使用webpack并且几乎达到相同的行为,但有一个例外:当CSS更改时,它会刷新整个窗口.有没有可能让它热切换CSS而不刷新？

到目前为止的配置:

var webpackConfig = {
    entry: ["webpack/hot/dev-server", __dirname + '/app/scripts/app.js'],
    debug: true,
    output: {
        path: __dirname + '/app',
        filename: 'scripts/build.js'
    },
    devtool: 'source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: __dirname + '/app/index.html',
            inject: 'body',
            hash: true,
            config: config
        }),
        new webpack.ProvidePlugin({
            'angular': 'angular'
        }),
        new ExtractTextPlugin("styles.css")
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: "style!css!sass?includePaths[]=" + __dirname + "/app/bower_components/compass-mixins/lib&includePaths[]=" + __dirname + '/instance/sth/styles&includePaths[]=' + __dirname + '/app/scripts'
            }
        ]
    }
};

项目目录结构。

以下是webpack配置文件。

webpack.config.client.js

const path = require('path');
const webpack = require('webpack');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'browser',
  mode: 'development',
  // mode: 'production',
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(CURRENT_WORKING_DIR, 'client/main.js'),
  ],
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assets so that other JS code can also access
      // and load it other than the component …

我有一个使用Webpack和Babel的React项目.当我在办公室计算机上创建它时,Webpack运行正常.当我将项目克隆到我的个人计算机上时,它出现以下错误:

ERROR in ./react_minesweeper.jsx
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/louisstephancruz/Desktop"
at /Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:298:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/louisstephancruz/Desktop/w6d5/minesweeper/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)

这是我的webpack.config.js:

module.exports = {
  entry: './react_minesweeper.jsx',
  output: {
    path: './',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.js', '.jsx' ]
  }
};

这是我的package.json:

{
  "name": "minesweeper",
  "version": "1.0.0",
  "description": …

我正在使用React,React-Redux和Webpack在Docker容器中运行我的项目并继续遇到此错误

internal/stream_base_commons.js:59 var err = req.handle.writev(req,chunks,allBuffers); ^

TypeError:req.handle.writev不是在Socket._writev(net.js:767:8)的Socket._writeGeneric(net.js:758:5)的writevGeneric(internal/stream_base_commons.js:59:24)中的函数在doWrite(_stream_writable.js:408:12)的clearBuffer(_stream_writable.js:517:5)at the Socket.Writable.uncork(_stream_writable.js:314:7)at connectionCorkNT(_http_outgoing.js:646:8)at process ._tickCallback(internal/process/next_tick.js:63:19)

以下是我的版本

1. NODE_VERSION 8.9
2. YARN_VERSION 1.7.0
3. OS Docker Linux/Raspbian Lite
4. Webpack/Webpack-Ddv-Server(最新)
5. React/Redux(最新)

我的package.json

{
  ....
  "dependencies": {
    "object-assign": "*",
    "raf": "*",
    "react": "*",
    "react-dev-utils": "*",
    "react-dom": "*",
    "react-facebook-login": "*",
    "react-helmet": "*",
    "react-loadable": "*",
    "react-slick": "*",
    "react-router": "*",
    "react-router-dom": "*",
    "react-redux":"*",
    "redux":"*",
    "redux-thunk":"*",
    "slick-carousel":"*",
    "font-awesome":"*"
  },
  "devDependencies": {
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": …

我刚刚完成了我正在做的一个有角度的项目，但我注意到控制台中的一些东西，如果可能的话我很想隐藏它，只是为了保持一切整洁。

这是 [webpack-dev-server] 模块不断断开连接并尝试重新连接，并向我的控制台日志发送垃圾邮件。像这样：

polyfills.js:1919 [webpack-dev-server] Live Reloading enabled.
polyfills.js:1919 [webpack-dev-server] Disconnected!
polyfills.js:1919 [webpack-dev-server] Trying to reconnect...
polyfills.js:1919 [webpack-dev-server] Live Reloading enabled.
polyfills.js:1919 [webpack-dev-server] Disconnected!
polyfills.js:1919 [webpack-dev-server] Trying to reconnect...
polyfills.js:1919 [webpack-dev-server] Live Reloading enabled.
polyfills.js:1919 [webpack-dev-server] Disconnected!
polyfills.js:1919 [webpack-dev-server] Trying to reconnect...

是否有解决方案，或者这只是目前的方式，直到应用程序投入生产？

我想使用webpack-dev-server在一个PORT上托管多个入口点.我目前的配置如下:

entry: {
    //Application specific code.
    main: [
        `webpack-dev-server/client?http://${config.HOST}:${config.PORT}`, 
        'webpack/hot/only-dev-server',
        './app/base.js',
        './app/main.js'
    ],

    login: [
        `webpack-dev-server/client?http://${config.HOST}:${config.PORT}`, 
        'webpack/hot/only-dev-server',
        './app/base.js',
        './app/login.js'
    ],
},
output: {
    path: assetsPath,
    publicPath: `http://${config.HOST}:${config.PORT}/public/dist/`,
    chunkFilename: "[name].js",
    filename: '[name].js',
},

但似乎它现在对我不起作用.有帮助吗？

我正在尝试构建一个Web应用程序,我想在amazon s3上存储所有html,js和css文件,并通过api与一个安静的服务器进行通信.

我试图实现延迟加载,并可能使用react路由器进行路由.似乎webpack具有此功能代码拆分,其工作方式与延迟加载类似.

但是,我发现的所有教程和示例都涉及webpack-dev-server,它是一个小型节点快速服务器.反正我是否可以在构建时生成bundle并将所有内容上传到amazon s3并实现与Angular的ocLazyLoading类似的东西？

有没有人在Laravel 5+上安装webpack dev服务器(在我的情况下为5.1)？

我将使用我的laravel PHP后端和ReactJS前端,我想在我的dev env上安装webpack dev服务器.

但是我对NodeJS中的很多配置感到困惑(我专注于PHP后端).

通常可以将webpack dev服务器与PHP应用程序结合起来吗？

我希望我的env能够双向工作:在我的apache服务器上(用于后端调试/开发)和在NodeJS服务器上(用于前端调试/开发).

我是否需要一些中间件,解决webpack的特定端口？一般来说NodeJS服务器如何加载我的PHP脚本？...或者apache web服务器加载页面比NodeJS将通知推送到前端？

chrome控制台错误:未捕获ReferenceError:未定义__decorate这是代码https://github.com/Dreampie/angular2-demo

运行:

npm安装

npm run typings install

npm跑步开始

在浏览器中打开localhost:80

有人帮忙吗？