vue+webpack搭建项目基础架构

初始我们先模拟vue-cli新建这几个文件，然后通过webpack打包让其成功输出Hello World！结构如下：

index.html——打包的html模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue and Webpack</title>
</head>
<body>
    //页面挂载点
    <div id="app"></div>
</body>
</html>

一般来说，index.html是通过script标签直接引入main.js的，但是webpack打包之后会自动将其引入，所以这里不用写

main.js——打包的js入口文件

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

/*new Vue({
    el:'#app',
    components:{App},
    template:'<App/>'
})*/
//另一种写法
new Vue({
    render:h => h(App)
}).$mount('#app');

讲解一：$mount是一个vue的全局函数，表示将构建出来的组件挂载到dom对象上。所以 .$mount('#app') 其实就相当于 el: '#app'。详细的介绍转官网。

讲解二：render是字符串模板（template:'<App/>'）的代替方案，允许你发挥 JavaScript 最大的编程能力。详细介绍转官网。

App.vue——总的组件入口

<template>
    <div id="app">
        {{msg}}
    </div>
</template>
<script>
    export default{
        name:'app',
        data(){
            return {
                msg:'Hello World!'
            }
        }
    }
</script>

接下来开始配置webpack

第一步安装webpack

首先我们init一下，一直回车就ok。然后会看到多了一个package.json文件

npm init

接着,安装webpack，这里因为用的webpack4+，所以把webpack-cli也安装上，--save-dev是把版本号添加到package.json配置文件中

npm install --save-dev webpack webpack-cli

第二步新建一个文件webpack.config.js，先配置好入口entry、出口output

//webpack.config.js
const path = require('path');

const config = {
    //开发状态下
    mode: 'development',
    //入口
    entry:'./src/main.js',
    //出口，表示将文件打包完后输出到dist文件夹下，名字叫bundle.js
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

module.exports = config;

接下来，我们需要什么就安装什么。先罗列一下用到的，这里是最简单的

vue——必须安装啊
vue-loader——解析.vue的插件
vue-template-compiler——解析文件里template模版的插件，必须有啊，没有就报错
html-webpack-plugin——打包时编译html的插件
webpack-dev-server——起服务、热更新的插件

如果需要用到es6、sass、jquery、图片等可以看我的其他两篇webpack的文章，都有介绍到。

vue

npm install vue --save-dev

main.js

import Vue from 'vue';

webpack.config.js

如果使用vue-loader加载.vue文件时（组件文件），webpack在打包对模板进行了渲染，就需要Runtime版本。从Compiler版本修改为Runtime版本：

resolve: {
    alias: { 'vue': 'vue/dist/vue.js' } 
},

vue-loader、vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

配置文件中webpack.config.js

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

module:{
    rules:[
        {
            test:/\.vue$/,
            loader:'vue-loader'
        }
    ]
},
plugins:[
    new VueLoaderPlugin()
],

html-webpack-plugin

npm install html-webpack-plugin --save-dev

webpack.config.js

plugins:[
    new HtmlWebpackPlugin({
        filename:'index.html',//文件名称
        template:'./index.html',//模版文件，咱们这里也就只有index.html
        hash:true
    })
],

webpack-dev-server

npm install webpack-dev-server --save-dev

webpack.config.js

//服务
devServer:{
   　//启用 webpack 的模块热替换特性
     hot:true
},

package.json

"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
},

接下来就是见证奇迹的时刻

npm start

默认打开8080，浏览器成功呈现Hello World!

如果想看打包后的文件，运行

npm run build

项目结构变成

dist就是打包后的文件夹，也是项目上线时往服务器上丢的代码

webpack.config.js代码

//引入插件
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');

const config = {
    mode: 'development',
    entry:'./src/main.js',
    //服务
    devServer:{
        //启用 webpack 的模块热替换特性
        hot:true
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    //从Compiler版本修改为Runtime版本
    resolve: {
        alias: { 'vue': 'vue/dist/vue.js' } 
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./index.html',
            hash:true
        }),
        new VueLoaderPlugin()
    ],
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

module.exports = config;

基础的就说完了，接下来会在此基础上学习vue-router

vue+webpack搭建项目基础架构

猜你喜欢