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 相关文章推荐
原始的js代码和jquery对比体会
Sep 10 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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正则校验用户名介绍
2008/07/19 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python的json包位置及用法总结
2020/06/21 Python
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
文秘专业自荐信
2013/10/14 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
食品安全宣传标语
2014/06/07 职场文书
基层工作经验证明样本
2014/11/16 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫