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

Ivanazyf 2019-06-29

文章指南

概要

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

前提

要看懂本文的Demo,需要你掌握或了解以下内容:

当然还有htmlcssjs的基础,但是相信读者如果在查阅vue或者webpack相关内容,说明已经掌握了基本的技能

Demo构建过程框架

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

通过以上7步,我们就可以构建一个简单高效的vue模块化开发框架了

构建过程


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

npm初始化项目

cmd

mkdir webpackVue
cd webpackVue
npm init

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

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

构建结果如下:

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

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

现在的项目结构如下:

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

我们来看看这个webpack.config.js里都有什么?

webpack.config.js

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,一般来说我们常用的就是developmentproduction,这里我们设为开发模式

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

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

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

相关推荐