WebPack工具运行原理及入门教程


Posted in Javascript onDecember 02, 2020

WebPack是什么

  • 一个打包工具
  • 一个模块加载工具
  • 各种资源都可以当成模块来处理
  • 网站 http://webpack.github.io/

如今,越来越多的JavaScript代码被使用在页面上,我们添加很多的内容在浏览器里。如何去很好的组织这些代码,成为了一个必须要解决的难题。

对于模块的组织,通常有如下几种方法:

  • 通过书写在不同文件中,使用script标签进行加载
  • CommonJS进行加载(NodeJS就使用这种方式)
  • AMD进行加载(require.js使用这种方式)
  • ES6模块

思考:为什么只有JS需要被模块化管理,前台的很多预编译内容,不需要管理吗?

基于以上的思考,WebPack项目有如下几个目标:

  • 将依赖树拆分,保证按需加载
  • 保证初始加载的速度
  • 所有静态资源可以被模块化
  • 可以整合第三方的库和模块
  • 可以构造大系统

从下图可以比较清晰的看出WebPack的功能

WebPack工具运行原理及入门教程

这是一个示意图

WebPack的特点

  • 丰富的插件,方便进行开发工作
  • 大量的加载器,包括加载各种静态资源
  • 代码分割,提供按需加载的能力
  • 发布工具

WebPack的优势

  • webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  • 能被模块化的不仅仅是 JS 了。
  • 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
  • 扩展性强,插件机制完善,特别是支持 React 热插拔(见 react-hot-loader )的功能让人眼前一亮。

WebPack的安装

安装命令

$ npm install webpack -g

使用webpack

$ npm init # 会自动生成一个package.json文件
$ npm install webpack --save-dev #将webpack增加到package.json文件中

可以使用不同的版本

$ npm install webpack@1.2.x --save-dev

如果想要安装开发工具

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

WebPack的配置

每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,就是一个配置项,告诉 webpack 它需要做什么。

下面是一个例子

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件项
  plugins: [commonsPlugin],
  //页面入口文件配置
  entry: {
    index : './src/js/page/index.js'
  },
  //入口文件输出配置
  output: {
    path: 'dist/js/page',
    filename: '[name].js'
  },
  module: {
    //加载器配置
    loaders: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' },
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  //其它解决方案配置
  resolve: {
    root: 'E:/github/flux-example/src', //绝对路径
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

plugins 是插件项,这里我们使用了一个 CommonsChunkPlugin的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。

entry 是页面入口文件配置,output 是对应输出项配置 (即入口文件最终要生成什么名字的文件、存放到哪里)

module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载

最后是 resolve 配置,配置查找模块的路径和扩展名和别名(方便书写)

WebPack开始使用

这里有最基本的使用方法,给大家一个感性的认识

正确安装了WebPack,方法可以参考上面

书写entry.js文件

document.write("看看如何让它工作!");

书写index.html文件

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

执行命令,生成bundle.js文件

$ webpack ./entry.js bundle.js

在浏览器中打开index.html文件,可以正常显示出预期

增加一个content.js文件

module.exports = "现在的内容是来自于content.js文件!";

修改entry.js文件

document.write(require("./content.js"));

执行第四步的命令

进行加载器试验

增加style.css文件

body {
background: yellow;
}

修改entry.js文件

require("!style!css!./style.css");
document.write(require("./content.js"));

执行命令,安装加载器
$ npm install css-loader style-loader # 安装的时候不使用 -g

执行webpack命令,运行看效果

可以在命令行中使用loader

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

使用配置文件

默认的配置文件为webpack.config.js

增加webpack.config.js文件

module.exports = {
 entry: "./entry.js",
 output: {
   path: __dirname,
   filename: "bundle.js"
 },
 module: {
   loaders: [
     { test: /\.css$/, loader: "style!css" }
   ]
 }
};

执行程序

$ webpack

发布服务器

安装服务器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

服务器可以自动生成和刷新,修改代码保存后自动更新画面

http://localhost:8080/webpack-dev-server/bundle

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

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Vue router安装及使用方法解析
Dec 02 #Vue.js
js前端对于大量数据的展示方式及处理方法
Dec 02 #Javascript
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
JavaScript 如何在浏览器中使用摄像头
Dec 02 #Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
JavaScript实现简单动态表格
Dec 02 #Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 #Javascript
You might like
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
小学后勤管理制度
2014/01/14 职场文书
《理想》教学反思
2014/02/17 职场文书
重阳节标语大全
2014/10/07 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技