标签: webpack-dev-server

我似乎无法让热重载功能正常工作.每当我做更新时,我都会收到以下错误消息:

获取http:// localhost:9090/cd0492f7657672ef15e4.hot-update.json 404(未找到)
[HMR]无法应用更新.需要做一个完整的重装!
[HMR](可能是因为重启了webpack-dev-server)

我敢肯定,这是造成publicPath: '/js/',的gulpfile.js,当我去http://localhost:9090/cd0492f7657672ef15e4.hot-update.json,我收到了404,但是当我去http://localhost:9090/js/cd0492f7657672ef15e4.hot-update.json我可以找到该文件.

但是publicPath: '/js/'需要app.js这样我不知道如何解决它,任何想法？

webpack.config.js

var webpack = require('webpack');
module.exports = {
    cache: true,
    entry: ['webpack/hot/dev-server', './resources/assets/app.js'],
    output: {
        path: __dirname + '/public/js',
        publicPath: '/js/',
        filename: "scripts.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel'
            }
        ]
    }
};

gulpfile.js

...
var webpackConfig = require('./webpack.config.js');
...
gulp.task('webpack-dev-server', function(callback) {
    // modify some webpack config options
    var myConfig …

我是一个webpack新手，对测试有疑问。

我有一个使用webpack，打字稿和业力作为测试运行程序的项目，并且我想对每个文件更改运行测试（例如，在“监视”模式下）

我知道karma-webpack，当我将karma作为自己的进程运行时，它运行良好（karma start ...）

但是我想要将业力集成到webpack流中。因此，从我幼稚的角度来看，我认为必须在webpack（例如linter）的预加载中定义业力。

但是我什么也没发现。。。我不敢相信这种通用的工作流程是不可能的（对每个源更改都进行测试）

有人可以给我一个建议吗？

我正在尝试使用webpack-dev-server代理配置将api请求发送到外部域,我似乎无法使其正常工作.

这是我的配置:

var path = require('path')

module.exports = {
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets'
    },
    devServer: {
        contentBase: 'public',
        proxy:{
            '/api/v1*': {
                target: 'http://laravelandwebpack.demo/',
                secure: false
            }
        }
    }
}

因此,/api/v1...只要我的应用程序向uri 发出请求,它就应该发送该请求http://laravelandwebpack.demo.

在我的Vue应用程序中,我正在使用它vue-resource来发出请求,并且我使用所需的uri前缀默认所有请求:

var Vue = require('vue')
Vue.use(require('vue-resource'))

new Vue({
    el: 'body',
    http: {
        root: '/api/v1', // prefix all requests with this
        headers:{
            test: 'testheader'
        }
    },
    ready: function (){
        this.$http({
            url: 'tasks',
            method: 'GET'
        }).then(function (response){
            console.log(response); …

Webpack在浏览器控制台中提供这些警告.

我无法在我的应用程序中找到警告中给出的模块名称.此外,我在我的应用程序通过的所有文件扫描,如果我有模块与作为GitHub上的问题就像提到的不同情况下的参考这个和这个,.没有明显的方法来确定哪个模块导致这些警告.

有任何想法来检测和消除这些警告吗？

Webpack dev服务器由于未知原因而自举两次.(请注意,只有dev-server有这个问题,如果我捆绑文件,一切运行正常).

我看到这行执行了两次:

// Load entry module and return exports
  return hotCreateRequire(790)(__webpack_require__.s = 790); 

我也可以在浏览器日志中看到这一行:

[HMR] Waiting for update signal from WDS...

这些是使用过的版本

"webpack": "^2.1.0-beta.21"
"webpack-dev-server": "^2.1.0-beta.4",

我已经创建了一个适合我的Webpack构建 - 它有一个用于热重新加载的开发服务器,以及一个运行模板html文件并集成该bundle.js文件的生产快速服务器.

这一切都很棒,除非我在我的开发服务器上工作,控制台给我这样的错误消息:

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

它引用bundle.js了错误的来源,而不是我正在使用的组件,这使得很难找到错误的来源.

我知道,只要控制台知道它是bundle.js包含错误的文件,但我怎样才能让控制台记录预捆绑代码？(例如Component.js)

提前致谢.

我尝试在1200模块(95%供应商)的观察模式下优化我们的6s构建时间.我试着了解发生了什么,所以我可以让它更快.

我不明白的事情:

• [emit]意味着给定的块是建立的吗？
• 如何验证给定的块是否重建？
• 我怎么能看到chunkHash？(我想确保webpack与md5的方式相同)
• 我可以寻找什么样的优化？

事实:

• 如果应用程序代码更改,则供应商软件包不会以监视模式写入磁盘,我通过修改日期进行验证并删除它.触发重建时未创建该文件.此外,供应商代码的md5哈希不会更改.
  • 大多数时间花在模块构建上,模块计数器从0-> 1200运行.

webpack配置如下:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchIgnorePlugin = require('watch-ignore-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

function isExternal(module) {
    var userRequest = module.userRequest;

    if (typeof userRequest !== 'string') {
          return false;
        }

    return userRequest.indexOf('bower_components') >= 0 ||
             userRequest.indexOf('node_modules') >= 0 ||
             userRequest.indexOf('libraries') >= 0;
}

module.exports = {
  context: __dirname + "/src",
  cache: true,
  cacheDirectory: '.cache',
  entry: {
      index: ["babel-polyfill", "./index"], …

我今天刚刚升级到Webpack 2.2并且已经阅读了他们的指南,这些指南似乎仍在进行中.

我在设置我的应用程序以使用webpack-dev-server和热模块重新加载时遇到了困难.

我通过webpack文档关注的指南在这里,但我不得不修改它以使用开发/生产应用程序.

https://webpack.js.org/guides/hmr-react/

我得到的两个错误如下......

Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (eval at <anonymous> (index.js:2), <anonymous>:44:15)
    at Object._renderNewRootComponent (eval at <anonymous> (index.js:64), <anonymous>:311:44)
    at Object._renderSubtreeIntoContainer (eval at <anonymous> (index.js:64), <anonymous>:401:32)
    at render (eval at <anonymous> (index.js:64), <anonymous>:422:23)
    at hotRenderer (eval at <anonymous> (index.js:73), <anonymous>:41:28)
    at eval (eval at <anonymous> (index.js:73), <anonymous>:47:5)
    at eval (eval at <anonymous> (index.js:73), <anonymous>:54:5)
    at Object.<anonymous> (index.js:73)
    at e (index.js:1)
    at Object.<anonymous> (index.js:146)

和

Warning: React.createElement: type is invalid …

当我运行$ npm run dev("dev": "webpack-dev-server")它打开localhost:8080/undefined而不是localhost:8080或至少localhost:8080/index.html

webpack-config.js devServer部分:

devServer:{

    contentBase: path.join(__dirname, 'dist'),

    compress: true,

    stats: "errors-only",

    hot: true,

    open: true

如果我删除URL的/ undefined部分,即使更换热模块也能正常工作,所以这不是一个大问题; 只是想知道为什么会这样.

编辑:我在MacOS上

Edit2:控制台信息时npm run dev:

Project is running at http://localhost:8080/ webpack output is served from / Content not from webpack is served from /Users/cozarkd/folders/dist webpack: wait until bundle finished: /undefined webpack: Compiled successfully.

泰

当使用--open标志启动时,如何激励webpack-dev-server打开我的publicPath？

目前它打开了一个浏览器选项卡到http:// localhost:3000,但我希望它直接打开http:// localhost:3000/app,这是我定义的公共路径.

当我在启动webpack-dev-server后手动键入http:// localhost:3000/app时,它按预期工作.

这是我的webpack.config.js到目前为止工作得很好:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = {

  entry: {
    vendor: [
      'jquery',
      'angular'
    ],
    app: './src/app/index.module.js',
    libs: [
      './src/libs/pagination/dirPagination.js',
      './src/libs/sc-date-time/sc-date-time.js',
      './src/libs/msd-elastic.js',
      './src/libs/ng-textcomplete.js',
      './src/libs/highcharts/highslide-full.js',
      './src/libs/highcharts/Sankey.js'
    ]
  },

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/'
  },

  devtool: …