用webpack打包vue

vue是什么？

vue就是一个渐进式 JavaScript 框架。

准备工作

首先我们需要一个基本的 webpack 打包的项目的架子。

然后依托Vue的官方文档进行配置

安装loader

yarn add vue-loader vue-template-compiler -D

配置webpack

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, 'dist')
    },
    devServer: { // webpack开启node服务
        contentBase: './dist',
        hot: true,
        open: true
    },
    plugins: [
        new CleanWebpackPlugin(), // 每次打包都先删除前一次打包的文件
        new HtmlWebpackPlugin({ // 生成html模版
            filename: 'index.html',
            template: 'index.html'
        }),
        new webpack.HotModuleReplacementPlugin(), // 热更新，即不用刷新页面就可以更新数据
        new VueLoaderPlugin()
    ],
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

添加app.vue

// 在src/下添加app.vue
<template>
    <div>
        vue
    </div>
</template>

<script>
    export default {

    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12

初始化vue对象

// 修改src/index.js
import Vue from 'vue'
import App from './app.vue'

new Vue({
    render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7

还记得webpack.config.js中的entry吗？这就是为什么要在src/index.js中初始化vue对象。

运行

执行 yarn start ，然后随便修改一下app.vue里面的内容。

就这样，我们用webpack打包出了vue项目，剩下的就是项目的架构、配置等等了，慢慢踩坑就行了，简单吧～

← 做一个最简单的webpack打包项目 JS的防抖与节流 →

# 用webpack打包vue

# 准备工作

# 安装loader

# 配置webpack

# 添加app.vue

# 初始化vue对象