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捕获超链接事件进行局部刷新代码
May 10 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
详解JavaScript 的执行机制
Sep 18 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
学习php分页代码实例
2013/10/24 PHP
php提高网站效率的技巧
2015/09/29 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
诚信考试承诺书
2014/03/27 职场文书
法人代表委托书
2014/04/04 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
无犯罪记录证明
2014/09/19 职场文书
学籍证明模板
2014/11/21 职场文书
泰山导游词
2015/02/02 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
详解Vue的options
2021/05/15 Vue.js