webpack打包js的方法


Posted in Javascript onMarch 12, 2018

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

在代码实践之前,先说一写webpack的基础知识。

1、为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  1. 模块化,让我们可以把复杂的程序细化为小的文件;
  2. 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
  3. Scss,less等CSS预处理器

2、什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

3、WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

webpack打包js的方法

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

webpack打包js的方法

从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

接下来我们简单为大家介绍
Webpack如何将多个js文件合并(注意这里只是文件的合并,即将多个写好的js合成一个js文件,以减少http请求)。

安装webpack

在安装 Webpack 前,你本地环境需要支持 node.js。安装node.js可以参考node官方文档。

使用如下命令在全局安装webpack。

$ npm install webpack -g

webpack已经安装到计算机上,现在可以使用webpack命令了。

在项目中使用webpack

使用以下命令在项目根目录下生成package.json文件。

$ npm init

安装webpack到项目中

将webpack加入到pageage.json配制文件中,使用以下命令:

$ npm install --save-dev webpack

此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。

webpack打包js的方法

webpack打包的两种方式

  1. webpack entry<entry> output (命令行)
  2. webpack -config webpack.conf.js (指定webpack的配置文件)

使用命令行打包js

一:创建两个js文件

创建app.js, sum.js,sum.js导出一个加法的函数,app.js使用这个函数。

// app.js

import {sum} from './sum';
console.log('sum(21, 22)', sum(21, 22));

// sum.js
export function sum(a, b) {
  return a + b;
}

二:使用webpack命令打包

在当前目录下使用: webpack app.js bundle.js ; 这里入口是app.js, 输出文件是bundle.js,这样就会看到文件中多出一个bundle.js文件。

创建一个html文件运行,引入bundle.js运行,控制台会打印:sum(21, 22) 43 。

使用webapck的配置文件打包(还是上面的两个js文件)

创建一个webpack.conf.js,编写wepack的配置文件

// 配置文件使用commonjs规范

module.exports = {

  // 入口,是一个对象
  entry: {
    app: './app.js'
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:5].js'
  }
}
  1. 在命令行输入:webpack --config webpack.conf.js,发现生成了一个app.dd1c6.js带hash的js文件。将这个js文件引入HTML里面发正常输出:sum(21, 22) 43
  2. 配置文件的命名为webpack.config.js,则直接在命令行输入webpack就可以。

webapck配合babel打包ES6、7

在项目根目录安装bable-loader和babel-core,babel-preset

  1. 使用npm init生成一个配置文件
  2. npm install babel-loader babel-core --save-dev
  3. 新建app.js,index.html,webpack.config.js等文件
  4. 编写webpack.config.js
  5. 安装babel-preset来指定编译的版本:npm install babel-preset-env --save-dev
  6. 在app.js里面随便写一些ES6的语法
  7. 使用命令行输入webpack进行编译

webpack配置文件

// 配置文件使用commonjs规范
module.exports = {

  // 入口,是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则,符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            presets: [
              ['babel-preset-env', {
                targets: {
                  browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看
                } 
              }]
              
            ] // 指定哪些语法编译
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

app.js和编译之后带hash的js

// app.js
let func = () => {};
const num = 30;
let arr = [3, 4, 5, 6];

let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);

// ==================//
// 编译之后(直接截取了编译的代码)
"use strict";


var func = function func() {};
var num = 30;
var arr = [3, 4, 5, 6];

var newArr = arr.map(function (item) {
 return item * 2;
}); // 将以前数组每一项*2

console.log(newArr);

babel的两个插件:Babel Polyfill 和 Babel Runtime Transform

用来处理一些函数和方法(Genertor,Set,Map,Array.from等未被babel处理,需要上面的两个插件)

  1. Babel Polyfill(全局垫片),npm install babel-polyfill --save, 使用:import "babel-polyfill";
  2. Babel Runtime Transform(为开发框架准备),npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
  3. 新建一个.babelrc来进行配置

app.js里面新增代码

import "babel-polyfill";
let func = () => {};
const num = 30; 
let arr = [3, 4, 5, 6];
let newArr = arr.map(item => item * 2); // 将以前数组每一项*2

console.log(newArr);
// 需要babel-polyfill
arr.includes(8);

// Genertor 函数
function* func2() {
}

webpack配置

// 配置文件使用commonjs规范
module.exports = {
  // 入口,是一个对象
  entry: {
    app: './app.js' // 相对路径
  },

  // 输出
  output: {
    // 带五位hash值的js
    filename: '[name].[hash:8].js'
  },

  // 指定loader
  module: {

    // rules中的每一项是一个规则
    rules:[
      {
        test: /\.js$/, // 值一个正则,符合这些正则的资源会用一个loade来处理
        use: {
          loader: 'babel-loader', // 使用bable-loader来处理
          options: { // 指定参数
            
          }
        },
        exclude: '/node_module/' // 排除在外
      }
    ]
  }
}

.babelrc文件配置

{
  "presets": [
    ["babel-preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 version"]
      } 
    }] 
  ],
  "plugins": ["transform-runtime"]
}

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

Javascript 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
videocapture库制作python视频高速传输程序
2013/12/23 Python
python目录与文件名操作例子
2016/08/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
web页面录屏实现
2019/02/12 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
小学科学教学反思
2014/01/26 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
生产实习心得体会范文
2016/01/22 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers