Webpack学习之搭建Vue项目

一.配置环境

由于npm是基于node环境，所以要先安装node。

创建文件夹在VScode中打开并打开终端（快捷键：shift+ctrl+`），输入指令：

npm init //初始化一个项目
npm install webpack vue vue-loader//安装webpack,vue,vue-loader

初始化的工作就已经完成。

二.构建项目

项目目录

1.创建src文件夹作为源码放置目录

创建Vue展示页面

<template>
    <div id="div">{{text}}</div>
</template>

<script>
export default {
    data(){
        return{
            text: "abc"
        }
    }
}
</script>

<style>
    #div{
        color: red;
    }
</style>

2.创建webpack.config.js，设置相应的资源配置

因为在webpack中默认只能识别JS文件，所以对于其它文件需要配置相应的loader

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');

module.exports = {
    entry: './src/index.js',  //入口文件
    output: {  //出口文件
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist') //拼接成绝对路径
        //__dirname文件的根目录
    },
    plugins: [
        new VueLoaderPlugin()
    ],
//规则
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader'] //Vue文件加载器
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader'] //css文件加载器
            }
        ]
    }
}

3.配置入口文件

import Vue from 'vue'
import App from './app.vue'

//创建要挂载的节点
const root = document.createElement('div');
document.body.appendChild(root);

new Vue({
    render: (h) => h(App) //将APP挂载到HTML上
}).$mount(root)

4.启动项目

在package.json中添加如下代码，webpack.config.js => 指定更新的文件。

npm run build启动项目

项目构建成功后，会创建bundle.js文件

项目目录：