文章指南

概要

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

前提

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

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

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

Demo构建过程框架

1. 确保你的环境正确，笔者这里的环境是node v10.12.0 ，npm 6.4.1 ，webpack 4.27.1，webpack-cli 3.1.2
2. 新建项目目录，并npm初始化项目
3. 新建webpack.config.js配置文件，并写入项目框架配置
4. 按照各项依赖包(加载器loader，插件plugin，dev工具等)，包括vue，vue-loader，vue-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等信息

构建结果如下：

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

现在的项目结构如下：

我们来看看这个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，一般来说我们常用的就是development和production，这里我们设为开发模式

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

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

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