安裝依賴包

使用webpack編譯vue文件始花，支持es6語(yǔ)法售担，至少需要的依賴包為：

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(),
        //自動(dòng)注入
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.html',
            inject:true
        })
    ]
}

配置快捷啟動(dòng)嘶摊、編譯腳本

通過(guò)package.json文件script進(jìn)行腳本配置

"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服務(wù)

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))

啟動(dòng)項(xiàng)目

npm run dev

通過(guò)完成以上的配置每辟，接著就可以在入口文件中使用vue創(chuàng)建項(xiàng)目了

來(lái)源：webpack vue 熱部署配置