Question

问题：

我希望通过vscode获得热重载和调试功能。但是vscode工作方式打破了文件夹结构，导致html-webpack-plugin工作异常（找不到模板文件，因为构建过程后文件夹结构发生了变化）。

我会试着解释一下我做了什么，以及我想做什么。抱歉我的英语不好。

这是我的文件夹结构（使用命令npm run build编译后）

├── configs
│   ├── webpack.background.js
│   └── webpack.foreground.js
├── dist
│   ├── assert
│   │   ├── bundle.4af708246e8105f0d0bd.js
│   │   └── bundle.4af708246e8105f0d0bd.js.map
│   ├── index.html
│   ├── server.a020b8f933c6d3507b7b.js
│   └── server.a020b8f933c6d3507b7b.js.map
├── package.json
├── package-lock.json
└── src
    ├── background
    │   └── app.js
    └── foreground
        ├── app.js
        └── index.html

并且，package.json：

{
  ...
  "scripts": {
    "foreground": "webpack --config ./configs/webpack.foreground.js",
    "background": "webpack --config ./configs/webpack.background.js",
    "build": "rm -rf dist/;npm run foreground; npm run background",
    "start": "rm -rf dist/;npm run build; NODE_ENV=production node dist/server.*.js",
    "dev": "babel-node --presets env,stage-2,react src/background/app.js"
  },
  ....
}

因为我想要开发中的热重载功能，所以我在src/background/app.js中编写了这段代码：

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from '../../configs/webpack.foreground';

const isDevelopment = process.env.NODE_ENV !== "production";

const app = express();
app.set('port', '10010');

if(isDevelopment) {
    let compiler = webpack(config);

    app.use(
        webpackDevMiddleware(
            compiler,
            {
                publicPath: config.output.publicPath
            }
        )
    );
    app.use(
        webpackHotMiddleware(
            compiler
        )
    );
}else{
    app.use(
        express.static(
            path.resolve('./dist')
        )
    );
}

console.log('starting server...');

app.listen(
    app.get('port')
);

Hereis webpack.foreground.js：

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

module.exports = {
    devtool: "source-map",
    entry: {
        app: [
            'webpack-hot-middleware/client?noInfo=true&reload=true',
            './src/foreground/app.js'
        ]
    },
    output: {
        filename: 'assert/bundle.[hash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/',
    },
    target: 'web',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        'env',
                        'stage-2',
                        'react'
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../src/foreground/index.html'),
            inject: 'body',
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

使用命令npm run dev和npm run start完全没问题。

但如果我对vscode做同样的事情，如果我想获得调试能力，我写了launch.json这样：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceRoot}/src/background/app.js",
            "cwd": "${workspaceRoot}",
            "outFiles": [
                "${workspaceRoot}/dist/server.*.js"
            ],
            "env": {
                "NODE_ENV": "production"
            },
            "preLaunchTask": "build"
        }
    ]
}

"preLaunchTask": "build"是npm run build任务。

我可以通过vscode获得调试功能，但是我失去了热重新加载功能，因为在{NODE_ENV生产时webpack-dev-middleware中没有src/background/app.js启动代码。

但如果我将“NODE_ENV”改为“开发”，我的编译失败，错误消息是：

Child html-webpack-plugin for "index.html":

    ERROR in Entry module not found: Error: Can't resolve '/src/foreground/index.html' in '/home/dev/Code/react-blog'

我认为这是因为dist文件夹下的构建代码破坏了原始文件的结构。

所以，请重复我的问题：

我如何编写代码（或配置）以获得vs代码的热重载和调试功能？

babel-node + vscode + html-webpack-plugin导致编译失败

0 个答案: