Vue:Webpack学习-打包

什么是Webpack

  本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle.

  Webpack 是当下最热门的前端资源模块化管理和打包工具,它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。通过 loader 转换,任何形式的资源都可以当做模块,比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等;

  伴随着移动互联网的大潮,当今越来越多的网站已经从网页模式进化到了 WebApp 模式。它们运行在现代浏览器里,使用 HTML5、CSS3、ES6 等新的技术来开发丰富的功能,网页已经不仅仅是完成浏览器的基本需求;WebApp 通常是一个 SPA (单页面应用),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JS 代码,这给前端的开发流程和资源组织带来了巨大挑战。

  前端开发和其他开发工作的主要区别,首先是前端基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。

模块化的演进

Script 标签

这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端:

  • 全局作用域下容易造成变量冲突
  • 文件只能按照 <script> 的书写顺序进行加载
  • 开发人员必须主观解决模块和代码库的依赖关系
  • 在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪

CommonsJS

服务器端的 NodeJS 遵循 CommonsJS 规范,该规范核心思想是允许模块通过 require 方法来同步加载所需依赖的其它模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。

优点:

  • 服务器端模块便于重用
  • NPM 中已经有超过 45 万个可以使用的模块包
  • 简单易用

缺点:

  • 同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
  • 不能非阻塞的并行加载多个模块

实现:

  • 服务端的 NodeJS
  • Browserify,浏览器端的 CommonsJS 实现,可以使用 NPM 的模块,但是编译打包后的文件体积较大
  • modules-webmake,类似 Browserify,但不如 Browserify 灵活
  • wreq,Browserify 的前身

AMD



  Asynchronous Module Definition 规范其实主要一个主要接口 define(id?, dependencies?, factory); 它要在声明模块的时候指定所有的依赖 dependencies,并且还要当做形参传到 factory 中,对于依赖的模块提前执行。

优点

  • 适合在浏览器环境中异步加载模块
  • 可以并行加载多个模块

缺点

  • 提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不畅
  • 不符合通用的模块化思维方式,是一种妥协的实现

实现

  • RequireJS
  • curl

CMD



  Commons Module Definition 规范和 AMD 很相似,尽量保持简单,并与 CommonsJS 和 NodeJS 的 Modules 规范保持了很大的兼容性。

  

优点:

  • 依赖就近,延迟执行
  • 可以很容易在 NodeJS 中运行

缺点

  • 依赖 SPM 打包,模块的加载逻辑偏重

实现

  • Sea.js
  • coolie

ES6 模块



  EcmaScript6 标准增加了 JavaScript 语言层面的模块体系定义。 ES6 模块的设计思想,是尽量静态化,使编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonsJS 和 AMD 模块,都只能在运行时确定这些东西。

优点

  • 容易进行静态分析
  • 面向未来的 EcmaScript 标准

缺点

  • 原生浏览器端还没有实现该标准
  • 全新的命令,新版的 NodeJS 才支持

实现

  • Babel

大家期望的模块系统

  可以兼容多种模块风格,尽量可以利用已有的代码,不仅仅只是 JavaScript 模块化,还有 CSS、图片、字体等资源也需要模块化。


安装Webpack

WebPack 是一款模块加载器兼打包工具,它能把各种资源,如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装:

npm install webpack -g
npm install webpack-cli -g

测试安装成功:

  • webpack -v
  • webpack-cli -v

配置

  创建 webpack.config.js 配置文件

  • entry:入口文件,指定 WebPack 用哪个文件作为项目的入口
  • output:输出,指定 WebPack 把处理完成的文件放置到指定路径
  • module:模块,用于处理各种类型的文件
  • plugins:插件,如:热更新、代码重用等
  • resolve:设置路径指向
  • watch:监听,用于设置文件改动后直接打包

使用webpack

1. 创建项目

2. 创建一个名为 modules 的目录,用于放置 JS 模块等资源文件

3. 在modules下创建模块文件,如 hello.js,用于编写 JS 模块相关代码

  

4. 在modules下创建一个名为 main.js 的入口文件,用于打包时设置 entry 属性

5. 在项目目录下创建 webpack.config.js 配置文件,使用 webpack 命令打包

6. 在项目目录下创建 HTML 页面,如 index.html,导入 WebPack 打包后的 JS 文件

7. 在IDEA控制台中直接执行webpack;如果失败的话,就使用管理员权限运行即可!

8. 运行 HTML 看效果

原文地址:https://www.cnblogs.com/FondWang/p/12345045.html

时间: 2024-11-11 07:13:08

Vue:Webpack学习-打包的相关文章

适合初学者学习的的vue+webpack的小项目

勾三股四的vue+webpack实战:http://jiongks.name/blog/just... 用Vue构建一个Notes App:https://coligo.io/learn-vuex-... Notes App中文版:https://segmentfault.com/a/11... Vue60分钟系列:http://www.cnblogs.com/keepfo... Vue2.0官方demo源码解读:http://www.jianshu.com/p/2fc8... webpack配

windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我要把我所参考的文档和实际遇到的问题分享给大家.由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正.下面言归正传: 所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892 http://www.cnblogs.com/ixxonli

vue+webpack在“双十一”导购产品的技术实践

双十一中,无线前端的产品可以说非常的丰富.在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现.而今年的双11导购业务占据了5大模块里的后三个,除了必抢,其它业务均是由手淘的同学来完成的,笔者作为导购产品的一员,选择导购产品来给大家解读其中的技术实践. 本次双十一的导购产品都有哪些? 看到这些截图,相信很多人都很熟悉,不管是双十一晚会摇一摇摇出的“清单”,还是大家抢完红包迫不及待点开的“我的双十一”,又或者是点开“我的双十一”标签进入的人群会场寻找与

webpack学习笔记(一)

写在前面: 近几年前端发展迅速,各种新标准的出现,angular.vue.react等框架也是N足鼎立,nodejs的出现使得前端也跨足到server领域,还出现了前端工程化的概念,这一切都在提醒各位前端开发者(工程师)一件事情:我们时时刻刻都需要学习,更新自己的知识体系. 正文: webpack是前端工程化的一个代表,工程化也是一个比较大的概念,所以我会针对自己的学习过程写一个系列的学习笔记,此为第一篇. webpack负责将资源文件模块化,通过它的加载器加载使用,最终将项目打包发布. web

从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来. 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令行(以下简称terminal)cd进入<project name>根目录,然后输入 npm init 初始化

vue,webpack,node间的关系

针对在“思否”上看到的关于vue,node,webpack的一些问题及回复,做出如下的整理,给同样不是很清楚的朋友做了解,也供自己学习 原链接:https://segmentfault.com/q/1010000008451764/a-1020000008452409 1.什么是npm install? ①npm install是帮助安装 vue,或React到本地,npm install也可以安装vue,React的开发工具.当然你完全可以像jQuery一样自己找网站下载下来,在页面中引入.

【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(未完待续)(四)Electron配置润色(未完待续)(五)预加载及自动更新(未完待续)(六)构建.发布整个项目(包括client和web)(未完待续) 摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是

webpack 学习

我的 webpack.config.js module.exports = { entry: [ './src/js/app.js', './src/js/my.js' ], output: { path: __dirname + '/output/', publicPath: "/output/", filename: 'main.js' }, module: { loaders: [ {test: /\.(jpg|png)$/, loader: "url?limit=81

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn