webpack 为什么不能热更新??还是说我打开的页面有问题?

Question

{
  "name": "my-webpack",
  "version": "1.0.0",
  "description": "my webpack template",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.config.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js --hot --inline"

  },
  "dependencies": {
    "vue": "^1.0.18",
    "vue-resource": "^1.0.3"
  },
  "devDependencies": {
    "autoprefixer-loader": "^2.0.0",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.3.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "vue-html-loader": "^1.2.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.14.0"
  },
  "author": "ycr",
  "license": "ISC"
}

config.base

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

module.exports = {
    //入口文件地址，不需要写完，会自动查找
    entry:{
        index:'./src/entry/index.js'
        // talk:'./src/js/entry/talk.js'
    },
    //输出
    output:{
        path: path.join(__dirname, './dist'),
        //文件地址，使用绝对路径形式
        filename: 'js/[name].js',
        //[name]这里是webpack提供的根据路口文件自动生成的名字
        publicPath: '/dist/',
        //公共文件生成的地址
        chunkFilename : '[name].chunk.js'
        //公共块生成的文件根据入口文件名字生成
    },
    //加载器
    module:{
        //加载器
        loaders:[
            {test:/\.vue$/,loader:'vue'},//解析vue文件
            {test:/\.js$/,loader:'babel',exclude:/node_modules/},//转化ES6的语法
            {test:/\.css$/,loader:ExtractTextPlugin.extract('style','css')},//编译css并自动调价css前缀
            {test:/\.(png|jpg|gif)$/,loader:'url-loader?limit=8192'},//图片转化，小于8K自动转化为base64的编码
            {test:/\.(html|tpl)$/,loader:'html-loader'},//html模版编译
        ]
    },
    plugins:[
    
    ],
    //.vue配置。需要单独出来配置
    vue:{
        loader:{
            css:'style!css!autoprefixer',
        }
    },
    
    //转化es5的语法
    babel:{
        presets:['es2015'],
        plugins:['transform-runtime']
    },
    resolve:{
        //require时省略的扩展名，如：require('module')不需要module.js
        extensions:['','.js','.vue'],
        //别名，可以直接使用别名来代表设定的路径以及其他
        alias:{
            fikter:path.join(__dirname,'./filters'),
            components:path.join(__dirname,'./src/components')
        }
    },
};

config.dev

var webpack = require('webpack');
var config = require('./webpack.base.config');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

config.devtool = '#source-map';        // source-map

config.vue = {
    loaders: {
        css: ExtractTextPlugin.extract(
            "style-loader",
            "css-loader?sourceMap",
            {
                publicPath: "/dist/"
            }
        ),
        less: ExtractTextPlugin.extract(
            'vue-style-loader',
            'css-loader!less-loader'
        ),
        sass: ExtractTextPlugin.extract(
            'vue-style-loader',
            'css-loader!sass-loader'
        )
    }
};


config.plugins = (config.plugins || []).concat([

    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),  
                             // 提取第三方库
    new HtmlWebpackPlugin({                                                                        // 构建html文件
        filename: './view/index.html',
        template: './src/view/index.html',
        inject: 'body',
        chunks: ['vendors', 'index'],
        minify:{
            removeComments: true, //移除HTML中的注释
            collapseWhitespace: false //删除空白符与换行符
        }
    }),
    new webpack.HotModuleReplacementPlugin(), //热加载

    new webpack.optimize.OccurenceOrderPlugin(),

    new webpack.optimize.UglifyJsPlugin(),

    new ExtractTextPlugin("[name].css"),             // 提取CSS


]);
config.devServer = {
        contentBase: './src/entry/index.js',
        host: 'localhost',
        publicPath: '/src/',
        port: 8080,
        inline: true,
        hot: true,
        progress: true
}

module.exports = config;

目录结构

为什么我run dev 不能热更新?还是说我打开的页面有错?

Answer 1

vue-hot-reload-api有安装吗, 用webpack-dev-server的话, webpack的entry配置需要改下吧

entry: {
    index: ['webpack-dev-server/client?http://127.0.0.1:8080','./src/entry/index.js']
}

也可以按照vue的脚手架vue-cli生产项目, 不过是用的webpack-dev-middleware和webpack-hot-middleware

可以参照我写的vue-cnode-mobile项目来搭建, master分支用的是webpack-dev-server, V2.0分支已切换成服务端渲染, 开发模式采用webpack-dev-middleware与webpack-hot-middleware

Answer 2

你试试npm i --save-dev webpack-dev-middleware webpack-hot-middleware 这个命令