Vue + Webpack 构建模块化开发框架详解

时间 2019-11-10

标签 vue webpack 构建模块化开发框架详解繁體版

原文原文链接

文章指南

概要

先在文章开头，作一个总结式的说明，这篇文章主要是讲在前端模块化开发模式中如何用Webpack这样流行的打包器来为当下一个很火热的框架——vue.js，构建一个项目框架。本文例子是一个基本的Demo，想构建更为复杂和高维护性的框架，请参考Webpack官网Guide教程javascript

前提

要看懂本文的Demo，须要你掌握或了解如下内容：css

前端传统式开发模式 VS 前端模块化开发模式
了解ES5/ES6
webpack、npm、node.js之间关系，以及基本概念，这里我写了博客，能够参考前端模块化开发中webpack、npm、node、nodejs之间的关系[小白总结]
npm基础知识(npm中文文档前十章)
vue.js基础知识(vue官方网站教程中介绍和深刻了解组件以及工具/单文件组件)
webpack基础知识(webpack官方教程的概念部分以及指南前6章)

固然还有htmlcssjs的基础，可是相信读者若是在查阅vue或者webpack相关内容，说明已经掌握了基本的技能html

Demo构建过程框架

确保你的环境正确，笔者这里的环境是node v10.12.0 ，npm 6.4.1 ，webpack 4.27.1，webpack-cli 3.1.2
新建项目目录，并npm初始化项目
新建webpack.config.js配置文件，并写入项目框架配置
按照各项依赖包(加载器loader，插件plugin，dev工具等)，包括vue，vue-loader，vue-template-compiler
编写逻辑代码和*.vue组件，咱们这里仅作了一个示范，没有复杂业务逻辑
启用webpack官方的dev工具dev-server，开启一个开发模式的小服务器
启用webpack监听模式，自动构建和编译项目

经过以上7步，咱们就能够构建一个简单高效的vue模块化开发框架了前端

构建过程

说明一下：笔者的webpack和webpack-cli都是全局安装的,但有时候会出现某些webpack依赖包`not 
found`的问题，这时候多是由于webpack4中把webpack-cli工具分离开了，致使可能在全局找不
到cli这时候先执行`npm link webpack` 和 `npm link webpack-cli`将他们加入全局环境执行

npm初始化项目

cmdvue

mkdir webpackVue
cd webpackVue
npm init

根据命令行的提示，填写package name， version ，description ，entry point等信息java

构建结果以下：node

新建webpack.config.js，并写入配置

如今的项目结构以下：webpack

咱们来看看这个webpack.config.js里都有什么？web

webpack.config.jsvue-router

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

module.exports = {
    mode : 'development',
    entry : {
        index : './src/index.js'
    },
    output : {
        filename : '[name].bundle.js',
        path : path.resolve(__dirname,'dist'),
        publicPath : './'
    },
    module : {
        rules : [
            {
                test : /\.css$/,
                use : ['style-loader','css-loader']
            },
            {
                test : /\.html$/,
                loader : 'html-loader'
            },
            {
                test : /\.vue$/,
                loader : 'vue-loader'
            }
        ]
    },
    resolve : {
        alias : {
            vue : 'vue/dist/vue.js'
        }
    },
    plugins : [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title : 'vue+webpack模块化开发简例',
            filename : 'index.html',
            template : './src/index.html',
        }),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(['dist'])
    ],
    devtool : 'inline-source-map',
    devServer : {
        contentBase : './dist',
        watchContentBase : true,
        compress : true,
        port : 8080,
        hot : true,
        open : true,
    }

}

mode : 有三个值能够设置，development/production/none，通常来讲咱们经常使用的就是development和production，这里咱们设为开发模式

entry :译为入口，这里配置的是咱们webpack从哪里开始分析咱们项目中包的依赖，从哪里开始打包咱们的文件，入口能够不仅一个，多入口的用法请参见官方文档entry points,我这里仅以一个入口为例

output :对应与entry，这是告诉webpack把咱们打包后的文件放到哪里，这里的

filename 是打包后文件的名字，[name].bundle.js其中[name]表示原文件的名称
path 是指将咱们的项目打包到当前文件夹的dist文件夹下
publicPath 是对应于打包后模板中引入的文件的一个公共目录，什么意思呢？好比这里的./，经过这个配置，则打包以后的index.html文件中引入js的路径就会统一加上./，这个在下面还会提到👇

module.rules :这里是配置加载loader的，简单来讲，loader是一个除js资源外的资源加载器，好比经常使用的css-loader/style-loader/html-loader等，默认状况下，webpack是只能认得js文件的，因此就须要一些额外的loader来加载不是js资源的文件，好比咱们这里vue的单文件组件是.vue后缀，因此咱们要引入vue-loader(这是vue官方给的一个webpack加载器)，有关loder更多内容请参见官方文档Loader

resolve.alias :这个是为了解决import Vue from 'vue';时默认引入的是vue.common.js，而非vue.js。这里是个大坑，Vue 最先会打包生成三个文件，一个是 runtime only 的文件 vue.common.js，一个是 compiler only 的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。可是vue在package.json的main属性中指向的是dist/vue.common.js。这就致使了，构建项目以后会出现，以下错误：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

关于这个问题，这里有一篇追根溯源的博客能够看一看，Vue wran:You are using the runtime-only build of Vue...

plugins : webpack自己也是构建在插件之上的，插件的功能能够很强大，作到一些加载器作不到的事情

VueLoaderPlugin : 让vue-loader发挥魔力的插件，这是官方给的说法
HtmlWebpackPlugin : 这是一个能够自动生成html的插件，能够免去了咱们本身在./dist中写一个html,更多内容看npm社区的介绍html-webpack-plugin
webpack.HotModuleReplacementPlugin : 启用webpack的热模块替换的插件，关于热模块替换，看官方网站Hot Module Replacement
CleanWebpackPlugin : 这个插件能够指定每次构建清除以前的构建文件，这个可让咱们的dist文件夹里看起来更整洁

devtool : 此配置控制是否以及如何生成源映射。这里的inline-source-map是相对耗费资源的一个选项，通常只在开发模式使用，这个能够将错误定位到文件和行级，能够很方便的debug，更多内容devTool

devServer : 这个属性是配置webpack的一个官方dev工具，webpack-dev-server，这是一个小型的服务器，能够在在指定端口运行，为了能够快速的搭建一个应用，不用在用Node API 写一个服务器了,更多内容devServer

内容还真很多，webpack的配置虽然繁杂可是灵活性也是很高的，若是不想本身手动搭vue的项目框架，vue-cli能够是你的选择。以上内容，阅读后若不明白，能够去官方文档查阅后，或者你也能够选择继续向下，由于看完整篇内容能够构建一个大概的印象

建立项目结构，安装各项依赖包

根据咱们webpack.config.js中的配置，咱们的项目结构就像这样同样：

其中

dist是webpack打包后的文件存放目录
src是咱们源文件存放目录

如今，让咱们来安装你在webpack中配置的各项所需的依赖包/加载器/dev工具等，安装的命令看起来很简单：

cmd or powershell

npm install --save clean-webpack-plugin html-webpack-plugin vue vue-loader

npm install --save-dev css-loader html-loader style-loader vue-template-compiler webpack-dev-server

咱们这里直接，一次性装好了全部的依赖，固然探索的过程要比这个看似简单的两行艰辛的多。这里要注意vue-template-compiler是vue编译模板<template></template>必需的，不要忘记安装

这里npm install的参数--save和--save-dev的区别就是，save是生产环境依赖的包，而save-dev是开发环境依赖的包，之因此这样分开是为了，既知足开发时便捷工具的需求又知足了真实发布时为了提升性能精简依赖包的需求

好了，咱们来看看，安装好依赖后，咱们的项目发生了那些变化？

package-lock.json是一个清单文件，咱们不须要关注它，咱们来看看package.json发生了什么

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "vue-router",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lvbingxu",
  "license": "ISC",
  "dependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "vue": "^2.5.21",
    "vue-loader": "^15.4.2"
  },
  "devDependencies": {
    "css-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "style-loader": "^0.23.1",
    "vue-template-compiler": "^2.5.21",
    "webpack-dev-server": "^3.1.10"
  }
}

咱们看到，咱们的package.json文件随着咱们的安装会自动添加上相应的依赖配置，而咱们上面所说的save ，save-dev参数就是分别对应这里的dependencies， devDependencies，若是npm不加参数，默认为save参数

tips : package.json是一个json格式的文件，和js的json对象支持不同，请勿在json文件中出现不符合json格式的字符串，好比注释 // /**/，或是在最后一项后加上 ,

编写业务逻辑，使用Vue单页组件

如今咱们的项目结构就像这样：

咱们来看看源文件代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

index.js

import Vue from 'vue';
import App from './app.vue';
// 
new Vue(App).$mount('#app');

app.vue

<template>
    <p>{{ greeting }} VUE!!!</p>
</template>

<script>
    module.exports = {
        data : function(){
            return {
                greeting : 'Hello'
            }
        }
    }
</script>
<style  scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>

vue知识再也不赘述，一句也讲不完，若是不清楚，请移步vue官方网站，这里的业务代码很简单，就是将一个<p></p>挂载到模板对应的<div id="app">上去

好了，到这里咱们已经基本把框架构建好了，终于到能够构建一下看看了

webpack打包项目，并查看打包后index.html

cmd or powershell

webpack --mode=development

以开发模式打包项目，由于在webpack.config.js中已经配置过mode，因此默认就是开发模式。咱们来看看，打包后的项目结构：

咱们来用浏览器打开/dist/index.html看看webpack是否将vue打包成功

看来咱们是成功了，到此为止，咱们已经从无到有构建了一个webpack打包的vue项目，可是他还不完整，咱们在作个补充！

开启一个dev-server服务器，并开启webpack的监听模式

为了让开发如虎添翼，咱们每次手动的在cmd or powershell中输入webpack --mode=development或是 webpack --mode=production显然是很烦人的，咱们能够经过在package.json中添加脚原本简化命令，以下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
    "buildp": "webpack --mode=production"
  },

tips : 注意这里 "buildp"的最后不能加上 ,，这对应了上一个tips的说法

这样咱们能够运行npm run build或者npm run buildp分别代替webpack --mode=development 和webpack --mode=production

固然，你发现这仍是没有多方便，不急，咱们能够开启webpack的监听模式，以下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
    "buildp": "webpack --mode=production",
    "watch": "webpack --watch"
  },

当咱们运行npm run watch后，这个进程会监听你的文件改变，一旦有文件的改动，webpack会自动帮你打包项目，无需手动输入了

除此以外，咱们还能够开启dev-server，一个小型的服务器，并开启热替换模块，这样无需手动刷新浏览器就能够实现视图更新了，是否是很厉害！这个demo中使用了热模块替换，可是笔者还未成功，有待进一步研究，下一篇博客再见，这里这是开启了dev-server服务器，让咱们看看如何开启：

webpack.config.js

devServer : {
        contentBase : './dist',
        watchContentBase : true,
        compress : true,
        port : 8080,
        hot : true,
        open : true,
    }

在你的配置中的最后加入devServer的配置，咱们再在package.json中加入一个脚本：

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development",
    "buildp": "webpack --mode=production",
    "watch": "webpack --watch",
    "server": "webpack-dev-server --open"
  },

让咱们执行，npm run server，发现error，别急，这是由于咱们的CleanWebpackPlugin将咱们的dist文件夹清除了，咱们在从新build一下

可见，咱们的dev-server正在监听8080端口，we success!

后续

到此，我系统的详细的讲述了，如何使用webpack构建一个vue的项目框架，但愿读者从中受益。咱们其实能够看到，咱们费了这么大的功夫，其实页面只是一个<p>Hello VUE!!!</p>，可能你会说是否是有些小题大做了，拿这个demo中的例子来讲确实是这样，可是这也是模块化开发和传统式开发的区别，对于小的项目或者需求咱们确实不用这么小题大作，可是随着页面的增多，业务需求的扩张和不肯定性增大，咱们不得不考虑代码的维护和复用，这在传统式开发中很难作到足够优秀的，可是模块化能够