使用webpack搭建一个vue demo

前言：我们在开发vue过程中使用vue-cli脚手架工具能够十分快速的构建项目，
但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码

一.目录结构

目录结构如下：

初始化为npm项目后，创建图示文件，文件夹

mkdir webpack-vue
npm init -y

二.项目依赖

首先安装webpack开发依赖

npm i webpack webpack-cli webpack-dev-server -D

安装babel相关依赖，编译es6代码

npm i babel-core babel-loader babel-preset-2015 babel-preset-stage-0 -D

考虑到要需要需要解析图片

npm i file-loader url-loader -D

编译样式文件

npm i css-loader style-loader -D

如果要在项目中使用sass，可以安装相关依赖

npm i sass-loader node-sass -D

接下来最重要就是要编译vue文件，解析vue的模版

npm i vue-loader vue-template-compiler -D

为了将模版页面和编译后的js整合，安装插件

npm i html-webpack-plugin -D

当然还有项目中需要使用的vue的npm包

npm i vue -S

现在所有的依赖安装完毕，接下来主要对webpack.config.js进行配置

三.项目配置

webpack.config.js 配置如下，都是webpack的基本配置

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

module.exports = {
    mode:'development',
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'demo.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,//配置以js结尾的文件
                loader:'babel-loader',//使用babel loader编译
                //排除node_modules的js文件
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:8192
                    }
                }
            },
            {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    plugins:[
    	//html模版插件
        new HtmlWebpackPlugin({
            template:'./public/index.html'
        }),
        //vue解析插件
        new VueLoaderPlugin()
    ],
    devServer:{
        port:3000,
        hot:true,
        open:true
    }
}

可以在.babelrc中配置babel预设

{ 
    "presets":["es2015","stage-0"]
}

在package.json文件中配置脚本

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --mode development"
}

四.演示

我们在App.vue中写下如下代码

<template>
  <div>
      <h1>哈哈,vue项目</h1>
      <p>外部样式</p>
  </div>
</template>

<script>
import "./style.scss";
export default {

}
</script>

<style lang="scss">
    h1{
        color: red;
    }
</style>

main.js 入口文件可以如下代码（如同vue-cli创建的项目）

import Vue from "vue";
import App from "./App.vue";

new Vue({
    el:"#app",
    render: h=>h(App)
});

如果要使用外部的样式可以在style.scss写代码

p {
    color: blue;
}

运行项目，根据配置项目启动在本地3000端口

npm run dev

效果就是这样的，有些人会说，写了半天，就写出这样的玩意儿，但是重要的是结果吗？你可以在这个项目框架下写一些简单的vue项目了。