详解如何使用webpack打包Vue工程
使用webpack打包Vue工程 前言入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了。感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现。大神们疯狂的造轮子,玩的不亦乐乎。我等小白们,疯狂追赶,学的心肝脾肺都快衰竭。而我的精力也仅限浅尝辄止,但是学多一点总有好处的。本篇文章就是介绍如何使用webpack构建前端工程。 目标本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包。制作出如下图的效果。仅仅搭一个框架,会用上很多插件和加载器。 环境准备主要是一些全局的nodejs包
开始1. 初始化工程 创建工程文件夹 new 并定位到 new 使用npm初始化工程 根据需要设置项目的信息, 也可以一路回车,使用默认信息,默认项目名称为文件夹名(项目名称不要设置成某个模块名,否则将来你引用摸个模块的时候会报错) {
"name": "gt","version": "1.0.0","description": "","main": "index.js","scripts": { "test": "echo "Error: no test specified" && exit 1" },"keywords": [ "new" ],"author": "fz","license": "ISC" } Is this ok? (yes) 之后文件夹下会生成一个package.json,记录了项目的详细信息,包括了各种依赖和插件。 2. 创建目录以及webpack配置文件 现在的目录结构,文件都是空白的,等一下把他们补上。 3. 安装webpack各中模块的loader(加载器)和插件以及我们需要的模块 4. 完成后的package.json 3. 编写webpack.config.js配置文件webpack配置文件比较复杂,需要做一下说明:webpack作为一款模块打包器,其管理的单元就是模块,webpack的模块指的不仅仅是js,包括了样式,图片,字体,模板等等。不同的模块需要相应的loader作为加载器进行加载。 引入必要的插件和模块 entry 顾名思义就是入口,他是程序的入口,但它同时也是chunk(代码块)构造器。构造有两种方式,上面一种,通过文件内require的模块关系,将文件打包成chunk。下面一种意思就是组成这个chunk的是这几个模块(backbone,underscore等三方模块的定义在下面, vue,jQuery,可以直接通过npm安装)。 这个配置会编译出两个文件,一个当作公共库使用,一个当作网站入口使用。 很明显,这里是输出文件控制
例如: 入口文件名叫index,那么它的输出就是index.d87f87sd6fsdgs76gsd967.js module 这部分,我不是很了解,只知道这里可以用于loader定义。loaders是一个数组。
加载器可以多个配合使用,典型的就是style css less,逻辑还是很清晰的,less 转 css 转 样式模块,然后插入文档。 解析模块功能,用来解析三方模块和一些require不方便的模块。
插件库定义
插件可以更具开发环境定义,因为插件越多,编译越慢,我们在开发环境的时候其实不需要那么多插件,生产环境的时候才需要,所以可以做一些处理,动态添加插件。这里有文章可以做,不介绍。 4. 写逻辑代码 var Vue = require('vue');
var app = new Vue({ require('vue'),使用vue模块,新建vue实例,(vue的具体用法上官网),内建一个app字组件,用同步的方法获取在./src/目录下的app.js模块。 <!DOCTYPE html> <html lang="en"> vueapp |