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

Question

我想在运行命令时进行热重新加载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文件),文件加载器插件(用于url/images)等.

当我运行npm run watch命令时 - 没有Hot Relaoding,没有任何反应.没有错误,但它没有做任何事情,它只在浏览器中打开index.html(http:// localhost:8080).

未检测到任何更改.例如,如果我编辑:

• app.scss
• 的index.html

......这些更改未加载.

它甚至没有编译任何东西(如果我记得很清楚,如果你删除了dist目录,在vue-cli中 - 当你运行时- 它将再次重新创建dist目录,它会将编译后的资源放在那里......但是这里,如果你删除了已编译的资产 - 它将不会编译/创建新的资产.npm run dev

Answer 1

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

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