Question

这是我的webpack.config.dev.js：

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    resolve: {
        alias: {
            jquery: path.resolve(__dirname, 'src/lib/jquery-1.11.1.min.js'),
            Vue: path.resolve(__dirname, 'src/lib/vue.js'),
            Vuex: path.resolve(__dirname, 'src/lib/vuex.js'),
            VueRouter: path.resolve(__dirname, 'src/lib/vue-router.min.js'),
            axios: path.resolve(__dirname, 'src/lib/axios.min.js')
        }
    },
    entry : {
        app: './src/app.js',
        vendors: ['jquery', 'Vue', 'Vuex', 'VueRouter', 'axios']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        // publicPath: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        inline: true,
        hot: true,
        compress: true,
        port: 8888,
        publicPath: 'http://localhost:8888/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules/')
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: 'url-loader?limit=8192'
            }
        ]   
    },
    plugins: [

        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendors', 'manifest'],
            minChunks: Infinity
        }),

        new htmlWebpackPlugin({
            template: './index.html',
            inject:'body',
            hash: true,
            chunks: ['vendors', 'manifest', 'app']
        }),

        new webpack.HotModuleReplacementPlugin()

    ]

}

而package.json是：

{
  "dependencies": {
    "express": "^4.15.3"
  },
  "name": "ws",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-latest": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^2.6.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.prod.js -p",
    "dev": "webpack-dev-server  --config webpack.config.dev.js"
  },
  "author": "gy",
  "license": "MIT",
  "description": ""
}

模板html是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <ul>
            <li>hhhh</li>
            <li>a</li>
            <li></li>
            <li>test</li>
        </ul>
    </div>
</body>
</html>

，app.js是：

var Vue = require('Vue');
var $ = require('jquery');
// var axios = require('axios');
var VueRouter = require('VueRouter');
var index = require('./index.scss');

var app = new Vue({
    el: '#app',
    data: {
        message: 'hello testssaalaalla test nnn h'
    },
    mounted: function() {
        $('#app ul li').html('from jquery')
    }
});

在开发环境中，当我同时设置inline: true和hot:true时，当我更改app.js中的代码时，浏览器无法自动刷新。就像我将message属性更改为test1时，浏览器没有进行刷新，我需要手动完成。但当我删除HMR部分，它的工作原理。需要一些帮助，提前谢谢。

Answer 1

添加
JavaRDD<String> words = lines.flatMap(s -> Arrays.asList(SPACE.split(s)));

在package.json的脚本中并使用npm start运行你的应用程序，它应该自动刷新。

也不，我认为没有必要提及

"start": "webpack-dev-server --hot"

webpack.config.js中的

使用config`hot：true`和`inline：true`不再刷新webpack

1 个答案: