Webpack简介

webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际

需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

模块系统的演进<script>标签

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

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

不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口,典型的例子如 YUI 库。

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

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

CommonJS规范

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目,比如在服务器和桌面环境中。

CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。该规范的主要内容是,模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。

一个直观的例子

// moduleA.js
module.exports = function( value ){
return value * 2;
}

  

// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2();

AMD规范

AMD(异步模块定义)是为浏览器环境设计的,因为 CommonJS 模块系统是同步加载的,当前浏览器环境还没有准备好同步加载模块的条件。

模块通过 define 函数定义在闭包中,格式如下:

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模块的名字,它是可选的参数。

factory 是最后一个参数,它包裹了模块的具体实现,它是一个函数或者对象。如果是函数,那么它的返回值就是模块的输出接口或值。 

一些用例

定义一个名为 myModule 的模块,它依赖 jQuery 模块:

define('myModule', ['jquery'], function($) {
// $ 是 jquery 模块的输出
$('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});

注意:在 webpack 中,模块名只有局部作用域,在 Require.js 中模块名是全局作用域,可以在全局引用。

定义一个没有 id 值的匿名模块,通常作为应用的启动函数:

define(['jquery'], function($) {
$('body').text('hello world');
});

 AMD也采用require()语句加载模块,但不同于CommonJS,他要求两个参数

第一个参数[module],是一个数组,里面的成员就是要加载的模块; 第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式,就是下面这样:

math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境

目前,主要有两个Javascript库实现了AMD规范:require.jscurl.js

 require(['math'], function (math) {
    math.add(2, 3);
  });

什么是 Webpack

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

Webpack 的特点

代码拆分

Loader

智能解析

插件系统

快速运行

webpack基本使用

    1. 创建项目根目录

    2. 初始化

      npm init 或 npm init -y

    3. 全局安装

      npm install webpack -g

    4. 局部安装,在项目目录下安装

      npm install webpack --save-dev

      --save: 将安装的包的信息保存在package中
      --dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

    5. 如果使用web开发工具,单独安装

      npm install webpack-dev-server --save-dev

基本使用

  1. 首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:

    <!-- index.html -->
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <script src="bundle.js"></script>
    </body>
    </html>
  2. 创建entry.js

    // entry.js  : 在页面中打印出一句话
    document.write('It works.')
  3. 然后编译 entry.js并打包到 bundle.js文件中

    // 使用npm命令
    webpack entry.js bundle.js

使用模块

1.创建模块module.js,在内部导出内容

module.exports = 'It works from module.js'

2.在entry.js中使用自定义的模块

//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

加载css模块

1.安装css-loader

npm install css-loader style-loader --save-dev

2.创建css文件

//style.css
body { background: yellow; }

3.修改 entry.js:

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

创建配置文件webpack.config.js

1.创建文件

var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式:require('./style.css')
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}

2.修改 entry.js 中的 style.css 加载方式:require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

//添加注释的插件
npm install --save-devbannerplugin

2.配置文件的书写

var webpack = require('webpack')

module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
//同时简化 entry.js 中的 style.css 加载方式:require('./style.css')
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
plugins: [
//添加注释的插件
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
}

3.运行webpack

// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */

开发环境

webpack 

--progress : 显示编译的进度

--colors : 带颜色显示,美化输出

--watch : 开启监视器,不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

npm install webpack-dev-server -g --save-dev

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

自动编译

1.安装插件

npm install --save-dev html-webpack-plugin

2.在配置文件中导入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
//添加注释的插件
new webpack.BannerPlugin('This file is created by zhaoda'),
//自动编译
new htmlWebpackPlugin({
title: "index",
filename: 'index.html', //在内存中生成的网页的名称
template: './index.html' //生成网页名称的依据
})
]

4.运行项目

webpack--save-dev
												

webpack模块化管理和打包工具的更多相关文章

  1. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  2. 模拟webpack 实现自己的打包工具

    本框架模拟webpack打包工具 详细代码个步骤请看git地址:https://github.com/jiangzhenfei/easy-webpack 创建package.json { " ...

  3. Webpack打包工具学习使用

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...

  4. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  6. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

  7. Vue学习【第四篇】:Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  8. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  9. 前端框架VUE----webpack打包工具的使用

    在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,还是看官网吧. 中文链接地址:https://www.webp ...

随机推荐

  1. 云计算--网络原理与应用--20171122--STP与HSRP

    简单了解STP 学习HSRP 实验 一.  简单学习STP STP(spanning tree protocol)生成树协议,就是把一个环形的结构改变成一个树形的结构.通过一些算法,在逻辑上阻塞一些端 ...

  2. Alpha第八天

    Alpha第八天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...

  3. 团队作业7——第二次项目冲刺(Beta版本12.10)

    项目每个成员的进展.存在问题.接下来两天的安排. 已完成的内容:头像功能原型设计.头像裁剪功能.头像上传功能.测试 计划完成的内容:头像功能测试.bug修复 每个人的工作 (有work item 的I ...

  4. Swift - 使用导航条和导航条控制器来进行页面切换并传递数据

    转自:http://www.hangge.com/blog/cache/detail_586.html

  5. C#系统服务安装

    转载 http://blog.csdn.net/vvhesj/article/details/8349615 1.1创建WindowsService项目 导入需要的引用比如System.configu ...

  6. linux的脚本应用for循环答应变量

    #!/bin/bash for var in A B C ; do echo "var is $var" done

  7. IDEA插件和快捷设置

    前言 IDEA全名Intellij IDEA,是Java开发的集成环境,它有两个版本,专业版(Ultimate)和社区版(Community),专业版需要注册,而社区版不用注册,同时需要注意的是社区版 ...

  8. CentOS 7 使用yum安装出现错误

    CentOS 7 使用yum安装软件出现错误: Loaded plugins: fastestmirror 此错误信息可能是因为DNS配置错误,可以通过更改配置文件来解决: 1. 使用vi打开DNS的 ...

  9. docker注意事项

      当你最后投入容器的怀抱,发现它能解决很多问题,而且还具有众多的优点: 第一:它是不可变的 – 操作系统,库版本,配置,文件夹和应用都是一样的.您可以使用通过相同QA测试的镜像,使产品具有相同的表现 ...

  10. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...