码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包原理

时间:2017-09-03 14:09:12      阅读:547      评论:0      收藏:0      [点我收藏+]

标签:desc   asc   temporary   pre   不同的   删除   tps   pac   设置   

Webpack

一个模块打包器,将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

本身只能打包js模块,自带BGM如虎添翼(Loader转换器)【将各种类型的资源转换成js模块】

安装

$ npm intsall webpack -g

  

在项目文件中安装webpack依赖

#进入安装目录
#确定已经有package.json,没有的话就通过npm init 创建
#安装webpack依赖
$npm install webpack --save-dev

  

查看版本信息

#查看安装的版本信息
$npm info webpack
#安装稳定版本
$npm install webpack@1.12.0 --save-dev

  

新建文件并使用

打包

$ webpack entry.js bundle.js

  

原理

webpack会分析每个入口文件,解析包依赖关系的各个文件,每个模块都打包到bundle.js。webpack给每个模块分配一个唯一的ID并通过这个ID索引和访问模块。页面运行时,先启动entry.js,其他模块会在运行require时候执行。

不同的模块管理工具

Bowser:给模块的安装、升级、删除提供一个统一的、可维护的管理模式

Browserify:让服务器端CommonJS 运行在浏览器端

Component:将网页所需要的所有资源(脚本、图片、样式表)编译后放在同一个目录下

Duo:站在巨人的肩膀上(拜师于Component,集Bowser和Browserify大成者),傲视群雄

Grunt

一种任务管理器(自动化任务处理工具),基于nodejs,可实现跨系统跨平台的桌面端操作。

原理:用js脚本设置任务,让工具读取这个js,解析到所要执行的任务,并调用插件完成任务。

安装:

npm install -g grunt-cli

  

package.json-----定义了项目中的数据,比如项目名,项目的依赖关系。

{
  "name": "project-nam",
  "version": "0.4.5",
  "description": "学习 grunt",
  "author": "Xingwucheng",
  "devDependencies": {
    "temporary": "~0.0.4",
    "grunt-contrib-jshint": "~0.6.4",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-watch": "~0.5.3",
    "difflet": "~0.2.3",
    "senver": "~2.1.0",
  }
}

Gruntfile.js -------定义和配置在Grunt中运行的任务

 

module.exports = function(grunt) {

  //项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    uglify: {
      options: {
        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
      },
      build: {
        src: ‘src/<%= pkg.name %>.js‘,
        dest: ‘build/<%= pkg.name %>.min.js‘
      }
    }
  });

  //加载grunt插件
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

  // 注册grunt默认任务.
  grunt.registerTask(‘default‘, [‘uglify‘]);

};

  

webpack打包原理

标签:desc   asc   temporary   pre   不同的   删除   tps   pac   设置   

原文地址:http://www.cnblogs.com/xingwucheng/p/7469347.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!