当应用“es2015”预设时,热重新加载不会在文件更改时应用更改

时间:2018-06-19 00:47:41

标签: express webpack babel hot-reload

我正在尝试使用HMR设置Express服务器以及所有babel转换。

但是,当我尝试添加es2015预设时,代码模块更新不会被推送到HMR。

此BABEL配置工作

{
  "presets": [
    ["env", {"modules": false}]
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-runtime"
  ]
}

此BABEL配置不起作用

{
  "presets": [
    ["env", {"modules": false}],
    "es2015"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-runtime"
  ]
}

webpack配置文件

const webpack = require('webpack')
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const StartServerPlugin = require('start-server-webpack-plugin')

module.exports = {
    mode: "development",
    entry: [
        'webpack/hot/poll?1000',
        './server/index'
    ],
    watch: true,
    target: 'node',
    externals: [nodeExternals({
        whitelist: ['webpack/hot/poll?1000']
    })],
    module: {
        rules: [{
            test: /\.js?$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        new StartServerPlugin('server.js'),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                "BUILD_TARGET": JSON.stringify('server')
            }
        }),
    ],
    output: {
        path: path.join(__dirname, '.hmr'),
        filename: 'server.js'
    }
}

的package.json

{
  "version": "1.0.0",
  "engines": {
    "node": ">=7.0",
    "npm": ">=3.3 <4"
  },
  "dependencies": {
    "express": "4.14.0",
    "express-graphql": "0.5.4",
    "express-jwt": "5.0.0",
    "express-session": "1.15.2",
    "graphiql": "0.7.8",
    "graphql": "^0.10.5",
    "graphql-relay": "^0.5.2",
    "helmet": "3.12.1",
    "mongodb": "^2.2.26",
    "mongoose": "^4.9.9"
  },  
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "start-server-webpack-plugin": "^2.2.5",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-node-externals": "^1.7.2"
  }
}

我甚至尝试将最新的@babel/preset-env与最新的babel-loader一起使用,但代码仍然无法更新。

"devDependencies": {
    "@babel/core": "7.0.0-beta.51",
    "@babel/preset-env": "7.0.0-beta.51",
    "@babel/runtime": "7.0.0-beta.51",
    "babel-loader": "8.0.0-beta.3",
    "start-server-webpack-plugin": "^2.2.5",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-node-externals": "^1.7.2"
  }

我正在使用其中一个中间件函数中的console.log语句来检查更新。使用第一个配置,它会更新并在控制台上打印语句,但后续配置从未起作用。它与最新的Webpack有关吗?任何帮助表示赞赏。

0 个答案:

没有答案