webpack vue 热部署配置

安装依赖包

使用webpack编译vue文件，支持es6语法，至少需要的依赖包为：

vue
vue-loader
vue-template-compiler
webpack
babel-loader babel-core babel-preset-2015 babel-preset-stage-2
css-loader

编写webpack配置文件

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const resole = (dir)=> path.resolve(__dirname, '../' + dir)
module.exports = {
    //配置文件入口
    entry:{
        app:'./src/main.js'
    },
    //配置输出目录
    output:{
        path:resole('dist'),
        filename:'[name].[hash].js'
    },
    //配置编译需要的加载器
    module:{
        rules:[
            {
                test: /\.vue$/,
                use:[
                    {loader:'vue-loader'}
                ]
            },
            {
                test:/\.js$/,
                exclude: /node_modules/,
                use:[{loader:'babel-loader'}]
            }
        ]
    },
    //配置可省略的后缀
    resolve:{
        extensions:['.js','.json','.css','.vue'],
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    //配置webpack插件
    plugins:[

        //热加载插件
        new webpack.HotModuleReplacementPlugin(),
        //自动注入
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:true
        })
    ]
}

配置快捷启动、编译脚本

通过package.json文件script进行脚本配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rm -rf dist",
    "build": "npm run clean && webpack --config build/webpack.config.js",
    "start": "node app.js"
  },

安装配置express服务

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')

const app = new express()

//配置中间件
app.use(express.static('dist'))

//配置webpack中间件
const webpackConfig = require('./build/webpack.config')
webpackConfig.entry.app = ['webpack-hot-middleware/client', webpackConfig.entry.app]
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler,{
    publicPath: "/"
}))
app.use(webpackHotMiddleware(compiler))


app.listen(9001, ()=>{
    console.log('list at http://localhost:9001')
})

配置webpack-dev-middleware、webpack-hot-middleware中间件，支持热加载

//配置webpack中间件
const webpackConfig = require('./build/webpack.config')
webpackConfig.entry.app = ['webpack-hot-middleware/client', webpackConfig.entry.app]
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler,{
    publicPath: "/"
}))
app.use(webpackHotMiddleware(compiler))

启动项目

npm run dev

通过完成以上的配置，接着就可以在入口文件中使用vue创建项目了

来源：webpack vue 热部署配置