首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何用快车配置webpack HMR

如何用快车配置webpack HMR
EN

Stack Overflow用户
提问于 2020-02-09 20:22:38
回答 1查看 2K关注 0票数 1

package.json脚本:

代码语言:javascript
复制
 "scripts": {
    "build": "webpack --config config/webpack.prod.config.js",
    "dev": "webpack --config config/webpack.dev.config.js && nodemon ./dist/server.js",
    "start": "nodemon ./dist/server.js"
  }

这是主要文件:

server.js

代码语言:javascript
复制
import express from "express";
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from './config/webpack.dev.config';

const app = express();
const compiler = webpack(config);

app.get("/", (req, res) => {
    res.send("Hello");
});

app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
}));

app.use(webpackHotMiddleware(compiler));

app.listen(4000, () => console.log("Listening to port 4000"))

我的webpack配置分为三个文件:

  • config/webpack.common.config.js
  • config/webpack.dev.config.js
  • config/webpack.prod.config.js

这是webpack常用的配置:

webpack.common.config.js

代码语言:javascript
复制
module.exports = {
    entry: {
        server: './server.js'
    },
    output: {
        path: path.join(__dirname, '../dist'),
        publicPath: "/",
        filename: '[name].js'
    },
    target: 'node',
    externals: [new nodeExternals()],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

这是webpack开发配置:

webpack.dev.config.js

代码语言:javascript
复制
module.exports = merge(common, {
    entry: {
        server: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './server.js']
    },
    mode: 'development',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
})

这是webpack开发配置:

webpack.prod.config.js

代码语言:javascript
复制
module.exports = merge(common, {
    mode: 'production'
});

最后,这是错误:

有什么问题吗?如何配置webpack的热装和快递?

EN

回答 1

Stack Overflow用户

发布于 2020-02-16 13:16:07

在您的webpack中添加"devServer“属性:

代码语言:javascript
复制
devServer: {
    contentBase: "dist",
    hot: true,
    stats: { colors: true }
  },

然后把这个加到webpack的入境点。在您的项目中,它是server.js

代码语言:javascript
复制
 require("webpack-hot-middleware/client?reload=true");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60140939

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档