标签: webpack-dev-server

我在设置开发工作流程时遇到问题,该工作流程将同时执行以下两个任务:

1. 在文件更改时重新编译静态资产(js,css).服务这些静态资产.通知浏览器,只要资产发生更改,页面就必须重新加载.使用react-hot-loader.
2. 使用express来运行服务器,该服务器提供静态资产将"消耗"的API.每次我的服务器文件更改时都要重新启动此Express服务器.

最好的做法是让webpack-dev-server服务于静态资产,并且有一个单独的Web服务器在不同的端口上提供API吗？如果是这样,javascript中的API调用将需要指定主机和端口,并且需要在进入生产之前进行更改.似乎所有在线教程都关注#1,并且没有设置API服务器.谁能指出我正确的方向？

我并不反对使用gulp和browserify或SystemJS而不是webpack,但似乎如果我想使用react-hot-loader,我需要使用webpack.

我有一个非常简单的项目：

appdir +- app +- main.js +- build +- bundle.js +- index.html +- webpack.config.js

webpack.config.js：

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    }
};

我张家的后main.js，的WebPack-dev的服务器好像它检测到的变化，并进行重新打包的bundle.js，但浏览器仍然收到的旧内容main.js。

我通过执行启动服务器 webpack-dev-server webpack.config.js

有任何想法吗？

当我改变我app.js和main.css同时webpack-dev-server运行时，包被更新。但是当我更改index.html内容时不会刷新；如果我向 HTML 添加一行，webpack-dev-server则不会刷新页面上的任何内容。这是我的webpack.config.js和package.json文件。我希望你能帮助我。

webpack.config.js :

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server'); 
var CleanWebpackPlugin = require('clean-webpack-plugin'); 
var chalk = require('chalk');  
var env = process.env.WEBPACK_ENV;

var host = 'localhost';
var port = '8080';

var config = {
  devtool: 'source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://' + host + ':' + port +'/',
    './src/app.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module : {
    loaders: [ …

我当前的 webpack 输出配置如下：

output: {
    path: PATHS.build,
    filename: '/[name].[chunkhash].js',
    chunkFilename: '/[chunkhash].js'
}

但是，我有一个条目文件 (custom.js)，我不想添加 [chunkhash] 后缀。我确实想在文件名后添加chuchhash后缀。本质上：

output: {
    path: PATHS.build,
    filename: '/[name].[chunkhash].js',
    chunkFilename: '/[chunkhash].js'
}

我怎样才能做到这一点？

我在这个地址使用vue-cli webpack样板:

vuejs模板/的WebPack

我希望webpack不要在开发模式下缩小和打包js文件.如何实现？问题是我们有一个巨大的测试asp.net webforms应用程序,它已经包含jquery和bootstrap,以一种无法绕过的方式.我与vue有冲突的jquery和bootstrap.js.我无法在开发模式下调试它们.

我刚接触webpack并做出反应,只是通过文档并创建了一个工作示例.不幸的是我卡住了,无法继续.问题是没有生成捆绑文件.我创建的文件是

的package.json

{
  "name": "rohith",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

module.export = {
    entry : './main.js',
    output : {
        path : './',
        filename : 'index.js'
    },
    devServer : {
        inline : true,
        port : 3333
    },
    module : {
        loaders : [
            {
                test : /\.js$/,
                exclude : /node_modules/,
                loader : 'babel',
                query : {
                    presets : …

我有一个调用函数来重新加载页面的按钮:

function doReload() {
 window.location='/'
}

Safari 11中大约有5次在控制台中抛出此错误:

WebSocket connection to 'ws://localhost:8080/sockjs-node/978/yzsndro2/websocket' failed: WebSocket is closed due to suspension.

我正在幕后运行Webpack 2 dev服务器.

在Chrome中似乎没有发生.这是High Sierra Beta所以也许是一个bug.

建议或想法？

我正在使用webpack 3，我想知道在重建webpack之前有什么方法可以清除webpack-dev-server控制台。

我正在尝试为Angular-Cli项目获取正确的设置,以便源映射在Microsoft Edge中工作.Angular-Cli v1.6.6 webpack v3.10.0

从配置中启用源地图支持,它可以在Chrome中使用,但不能在Edge中使用.在Edge中我看到如下错误:

找不到webpack:///(webpack)-dev-server/client？源地图中指定的32cc

我看到"eval code(xxx)"只链接.

从我可以google"webpack:///"不支持Edge但我无法更改Angular-Cli设置以将其更改为其他内容(或者我不明白如何).

只是执行"ng弹出"使源映射从无法工作到半工作(如何正确映射到生成的捆绑的js文件,但不是像Chrome中的非捆绑的js文件)但我仍然看到"找不到webpack:/ //"就像Edge中的消息一样.

我已经尝试编辑webpack.config.js文件来更改"devtool"设置和/或"SourceMapDevToolPlugin"参数设置.

我的测试都没有奏效.

我正在使用handlebars-loader：

  {
    test: /\.hbs$/,
    loader: 'handlebars-loader',
  }

我也在使用html-webpack-plugin。

使用Webpack Dev Server，一切都能按我的意愿进行：

如果保存了对车把模板或SCSS文件的更改，则会自动重新加载页面。

但是，一旦我能hot: true下devServer，HMR开始对SCSS变化工作（即CSS地没有全部重新加载更新），这是我想要的，但如果我改变车把模板，HMR不工作，和常规的“热重载”（即重新加载整个页面）也停止工作。

有任何想法吗？

如果HMR适用于SCSS更改，并且对把手模板进行常规的“热重载”（没有，该方法已经可以使用hot: true），那也很好。