详解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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
JS实现评价的星星功能
Aug 20 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
解决angularJS中input标签的ng-change事件无效问题
Sep 13 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时间计算相关问题小结
2016/05/09 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
人事部专员岗位职责
2014/03/04 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
python装饰器代码解析
2022/03/23 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技