详解webpack模块加载器兼打包工具


Posted in Javascript onSeptember 11, 2018

 什么是 webpack?

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。

你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期 Github 上各大主流的(React相关)项目来说,它们仓库上所展示的示例已经是基于 webpack 来开发的,比如 React-Boostrap 和 Redux。

webpack的官网是 http://webpack.github.io/ ,文档地址是 http://webpack.github.io/docs/ ,想对其进行更详细了解的可以点进去瞧一瞧。

1>基本介绍

在webpack中,一个css甚至一个字体都成为模块,彼此存在依赖关系,webpack就是处理模块间依赖关系的,并将它们进行打包。

各种文件格式通过特定的加载器loader编译后,最终统一生成为.js,.css,.png,.jpg等静态资源。

但是归根到底他就是有个.js的配置文件,一个构架好或者差都表现在这个配置文件中。

2>配置webpack

创建一个目录demo,npm初始化

npm init//完成后有package.json文件

本地局部安装webpack

npm install webpack --save-dev

接着安装webpack-dev-server,可以在开发环境提供很多服务,比如启动一个服务器,热更新,接口代理

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

写配置文件

在package.json中scripts里添加一个快速启动webpack-dev-server服务的脚本"dev":"webpack-dev-server --open --config webpack.config.js"

运行npm run dev的时候就会执行"webpack-dev-server --open --config webpack.config.js

其中config指向的是webpack-dev-server指向的文件路径。Open在执行时自动会在浏览器打开页面,默认地址是127.0.0.1:8080,不过ip,端口号都可以配置

3>webpack的四个核心概念:

入口(entry)、输出(output)、加载器(loader)、插件(plugins)

1》entry 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始,可以是单入口也可以是多入口

2》output 用来配置编译后的文件存储位置和文件名,只能有一个出口

  • output中有path选项用来存放打包后文件的输出目录,必填
  • filename用于指定输出文件的名称
  • publicePath指定文件引用的目录

3》loader 对模块源代码进行转换(webpack 本身只能处理Js模块)。

module:{
  rules:[
  {
   test:/\.css$/,
  use:[
    'style-loader',
    'css-loader'
  ]
  }
 ]
 }

在module对象的rules属性中可以指定一系列的loader,每一个loader都必须包括test,use两个选项。

上面代码的意思是:webpack编译过程中遇到require()或import语句导入一个后缀为.css的文件时,它将先通过css-loader转换,再通过style-loader转换,然后打包。

  • test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  • use 属性,表示进行转换时,应该使用哪个 loader。可以是字符串或者数组,数组从后面开始编译。
const webpack = require('webpack'); //访问 webpack 运行时(runtime)
 const configuration = require('./webpack.config.js');
 let compiler = webpack(configuration);
 compiler.apply(new webpack.ProgressPlugin());
 compiler.run(function(err, stats) {
 // ...
 });

4》Plugins:可以用来解决loader无法实现的其他事。外置插件要先npm安装,然后导入插件用require()

extract-text-webpack-plugin插件可以把散落在各地的Css提取出来,并合成一个文件.

//导入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//...
 plugins:[
 //重命名提取后的css
 new ExtractTextPlugin('main.css')
 ]
};

webpack的优点如下:

1. webpack 遵循commonJS 的形式,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS ,所有的静态资源,例如css,图片等都能模块化,即以require的方式引入。

3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

webpack与gulp的区别

gulp合并后仍然是你写的代码,只是局部变量名被替换,一些语法做了转换而已,整体内容并没有发生改变。

Webpack打包后的代码已经不只是你写的代码,其中夹杂很多webpack自身的模块处理代码。

他们的定位是不同的。对gulp来说,他旨在规范前端开发流程。webpack更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。

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

Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
webpack css加载和图片加载的方法示例
Sep 11 #Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 #Javascript
webpack的CSS加载器的使用
Sep 11 #Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 #Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 #Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 #Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 #Javascript
You might like
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP实现递归的三种方法
2020/07/04 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
JSX在render函数中的应用详解
2019/09/04 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python读取YAML文件过程详解
2019/12/30 Python
浅谈django channels 路由误导
2020/05/28 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
.NET面试问题集
2015/12/08 面试题
早会主持词
2014/03/17 职场文书
党的生日演讲稿
2014/09/10 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
田径运动会通讯稿
2015/07/18 职场文书