标签: webpack-dev-server

到目前为止,我所看到的所有webpack示例都涉及客户端热模块替换,例如:this和this.

根据webpack文档,可以使用EITHER webpack-dev-server或中间件(webpack-dev-webpack-dev-middleware和webpack-hot-middleware,以及webpack-hot-middleware/client在配置中entry,并集成到例如express js中)来启用热客户端代码的模块替换

是否可以为服务器端代码启用热模块更换？该文档确实显示了一个例子

var requestHandler = require("./handler.js");
var server = require("http").createServer();
server.on("request", requestHandler);
server.listen(8080);

// check if HMR is enabled
if(module.hot) {
    // accept update of dependency
    module.hot.accept("./handler.js", function() {
        // replace request handler of server
        server.removeListener("request", requestHandler);
        requestHandler = require("./handler.js");
        server.on("request", requestHandler);
    });
}

该文件非常简洁.

所以问题是,如何在不重启服务器的情况下在服务器端代码中实现热模块替换？(目前,我有nodemon监视服务器端代码,以便在文件更改时重启服务器)

所以这是我的webpack配置:

import path from 'path';

var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // publicPath: 'http://localhost:3000/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname, "node_modules"),
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            template: 'ejs!./dev/index.ejs',
            inject: 'body'
        })
    ]

};

我的index.ejs档案:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include html/one/1.ejs %>

</body>

</html>

我的文件夹结构:

dev/
  /assets …

我在使用带有webpackdevserver的react路由器设置单页反应应用程序时遇到了一些问题.如果我使用browserhistory webpack在输入嵌套路由url时会遇到一些问题(例如/ client/view).这可以通过添加apiFallback来解决,但热重载仍然有问题.它尝试从不存在的深层URL(/client/view/hot-update.json)加载hot-update.json文件,因此失败并重新加载页面.如何告诉hotreload始终从基本URL(/)加载hot-update.json？

在webpack的入门页面中，有关webpack-dev-server它的部分下提到-

开发服务器使用webpack的监视模式。它还可以防止webpack将生成的文件发送到磁盘。相反，它会保留并从内存中提供结果文件。

这是否意味着捆绑的文件webpack-dev-server仅保留在内存中，并且我还必须webpack --watch在后台运行以及与dev-server进程一起将编译后的文件实际保存到硬盘中？

我正在尝试将热模块重新加载到我的打字稿项目中.我有以下设置:

的package.json

"start": "webpack-dev-server"

tsconfig.js

{
    "compilerOptions": {
        "outDir": "/public/",
        "target": "es5",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

webpack.config.js

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

var publicFolder = path.join(__dirname, 'public');
var sourceFolder = path.join(__dirname, 'src');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index.tsx',
    ],
    output: {
        filename: 'bundle.js',
        path: publicFolder,
        publicPath: publicFolder,
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    },
    module: {
        loaders: [
            { …

我一直遇到Vagrant机器的常见错误,并且npm文件系统突然变为只读.在所有情况下,都涉及包含git repo的同步目录.

这是我能够遇到问题的配置设置.这两个文件都位于像面向节点-git仓库的根这一个.

Vagrantfile

# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
  # Use host's SSH keys
  config.ssh.forward_agent = true

  # Get current directory name (presumably, repo dirname)
  repo_dirname = File.basename(Dir.getwd)

  # Set US locale
  ENV['LC_ALL']="en_US.UTF-8"

  # Ensures virtualbox can create symlinks in shared folders
  config.vm.provider "virtualbox" do |vb|
    vb.customize ["setextradata", :id,
                  "VBoxInternal2/SharedFoldersEnableSymlinksCreate/vagrant", "1"]
  end

  # Forward usual dev port through to host machine
  config.vm.network :forwarded_port, …

我正在使用webpack-dev-server在Cloud9上运行基于React的网站,因此它通过https提供内容.问题是当我尝试向外部http链接发出一些ajax(网络)请求时,它会出现以下错误:

混合内容:"https:// ..."页面是通过HTTPS加载的,但是请求了一个不安全的XMLHttpRequest端点"http:// ...".此请求已被阻止; 内容必须通过HTTPS提供.

是否有任何技巧可以使webpack配置成为可能的http请求数据？

(function (exports, require, module, __filename, __dirname) { import path from 'path'
                                                              ^^^^^^
SyntaxError: Unexpected token import

我使用时会发生此错误webpack-dev-server --hot.

这似乎是因为它无法读取import或webpack不支持import.我尝试使用,babel-register但它不起作用.有什么方法可以解决这个问题吗？请参阅下面的代码.

webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
import HtmlPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const vueLoaders = {
  html: 'pug-loader',
  css: ExtractTextPlugin.extract({
    use: 'css-loader',
    fallback: 'vue-style-loader'
  }),
  scss: 'vue-style-loader!css-loader!sass-loader',
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}

export default {
  entry: './client/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new ExtractTextPlugin('bundle.css'),
    new …

我的雇主有许多正在积极开发的Angular 2+应用程序.这些应用程序托管在nginx反向代理之后.例如,在开发期间,可以在以下位置访问一个应用程序:

https://localhost/my-app-1

而另一个可能在:

https://localhost/my-app-2

为了实现这种代理行为,我将每个Angular应用程序配置为在托管时使用不同的端口ng serve:

// in angular.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "projects": {
        "my-project": {
            "architect": {
                "serve": {
                    "options": {

                        // each app gets its own port
                        "port": 4201

                    }
                }
            }
        }
    }
}

然后,我使用nginx使用此nginx配置将流量代理到相应的端口:

# proxy my-app-1 requests
location ^~ /my-app-1/ {

    proxy_pass http://127.0.0.1:4201/;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;

    proxy_http_version 1.1;
    proxy_cache_bypass $http_upgrade;
}

# proxy my-app-2 requests
location ^~ /my-app-1/ {

    proxy_pass http://127.0.0.1:4202/;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection …

对于每个版本的webpack，似乎此配置都已更改，并且使用vue-cli创建的项目更改了指定Webpack配置的方式。我已经尝试过在此站点上找到的所有解决方案，它们似乎都针对不同版本的webpack。

当我更改js文件时，我想完全关闭网页的自动重新加载。我真的不介意自己刷新一下，并且自动重装经常会遇到麻烦。

我使用以下命令创建了我的项目， npm install -g @vue/cli vue create my-project 并使用以下命令 启动了我的开发服务器： npm run serve 调用： vue-cli-service serve 看起来我应该能够在vue.config.js文件中传递某些内容，但是我不知道是什么。那里有一个部分configureWebpack，但是我尝试在其中放置各种解决方案，但是我的页面仍然不断刷新。

感谢您的指导！我很难找到与此有关的最新文档。

编辑：

我创建了一个新项目，并且具有以下vue.config.js文件：

module.exports = {
  lintOnSave: false
}

我从需要使用的说明中看到：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // disables Hot Reload
      }
    }
  ]
}

但是我不确定那会去哪里。我认为这是描述不同的配置文件。

另外，如果我没看错的话，那只会影响.vue文件。如果我更改.js文件怎么办？