Webpack：如何设置 webpack-dev-server 和 Hot Reload

Posted 2023-02-22

【中文标题】Webpack：如何设置 webpack-dev-server 和 Hot Reload

【英文标题】：Webpack: How to setup webpack-dev-server and Hot Reload

【发布时间】：2017-10-17 09:33:04

【问题描述】：

我想在运行npm run watch 命令时进行热重载。 （我希望它在使用 vue-cli 时能够正常工作 - 当您运行 npm run dev 命令时：https://vue-loader.vuejs.org/en/features/hot-reload.html）。

所以，我已经安装了 webpack-dev-server，这是我尝试过的：

package.json：

  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "scripts": 
    "dev": "cross-env NODE_ENV=development webpack",
    "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "node-sass": "^4.5.2",
    "purifycss-webpack": "^0.6.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  

如果您查看 "watch" 脚本 - 它使用 webpack-dev-server 并且还具有 --open --hot - 这与 vue-cli 的 package.json 中的相同。

另外，这是我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
var inProduction = (process.env.NODE_ENV === 'production');

module.exports = 
    entry: 
        app: [
            './src/js/main.js',
            './src/sass/app.scss'
        ]
    ,
    output: 
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js'
    ,

    module: 
        rules: [
            
                test: /\.s[ac]ss$/,
                use: ExtractTextPlugin.extract(
                    use: ['css-loader', 'sass-loader'],
                    fallback: 'style-loader'
                )
            ,
            
                test:  /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: 
                    name: '[name].[ext]?[hash]'
                
            ,
            
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            ,
            
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            
        ]
    ,

    plugins: [
        new ExtractTextPlugin('[name].css'),

        new PurifyCSSPlugin(
            paths: glob.sync(path.join(__dirname, 'index.html')),
            minimize: inProduction
        ),

        new webpack.LoaderOptionsPlugin(
            minimize: inProduction
        )
    ],

    devtool: '#eval-source-map'
;

if (inProduction) 
    module.exports.devtool = '#source-map';

    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin(
            sourceMap: true,
            compress: 
                warnings: false
            
        )
    );

请注意，我使用的是 ExtractTextPlugin（我有一个单独的 CSS 文件）、file-loader 插件（用于 url/图像）等。

当我运行npm run watch 命令时——没有热重压，什么也没有发生。没有错误，但它什么也不做，它只在浏览器中打开 index.html (http://localhost:8080)。

未检测到任何更改。例如，如果我编辑：

app.scss

index.html

...未加载这些更改。

它甚至不编译任何东西（如果我没记错的话，在 vue-cli 如果你删除了 dist 目录 - 当你运行 npm run dev - 它将再次重新创建 dist 目录，并将已编译的资产放在那里...但是在这里，如果您删除了已编译的资产 - 它不会编译/创建新的）。

【参考方案1】：

我有一个用于引导我自己的项目的模板项目，它具有热重载功能。它使用 gulp 运行 webpack-dev-server，但您可以查看并将相关位添加回您自己的 webpack.conf.js：

https://github.com/vhogemann/angular2-starter/blob/master/config/gulp.dev-server.js