详解webpack模块化管理和打包工具


Posted in Javascript onApril 21, 2018

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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  库。

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

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

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(4);

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.js 和 curl.js

 require(['math'], function (math) {

math.add(2, 3);

});

什么是 Webpack

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

Webpack 的特点

  1. 代码拆分
  2. Loader
  3. 智能解析
  4. 插件系统
  5. 快速运行

webpack基本使用

创建项目根目录

初始化

npm init 或 npm init -y

全局安装

npm install webpack -g

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

npm install webpack --save-dev

--save: 将安装的包的信息保存在package中

--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

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

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

基本使用

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

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

创建entry.js

// entry.js : 在页面中打印出一句话
document.write('It works.')

然后编译 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
Node.Js生成比特币地址代码解析
Apr 21 #Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 #Javascript
JS装饰器函数用法总结
Apr 21 #Javascript
vue 之 .sync 修饰符示例详解
Apr 21 #Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 #Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 #Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
You might like
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
jquery.validate使用详解
2016/06/02 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Django自定义manage命令实例代码
2018/02/11 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python定时器线程池原理详解
2020/02/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python属于跨平台语言码
2020/06/09 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
三年大学自我鉴定
2014/01/16 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
推广活动策划方案
2014/08/23 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
业务员岗位职责
2015/02/03 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
交通事故起诉书
2015/05/19 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书