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 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
es6基础学习之解构赋值
Dec 10 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获取服务器端信息的方法
2014/11/28 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python控制台中实现进度条功能
2015/11/10 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python:socket传输大文件示例
2017/01/18 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
医学生自我评价
2014/01/27 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
房屋转让协议书
2014/10/18 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
会计工作岗位职责
2015/02/03 职场文书
电影雨中的树观后感
2015/06/15 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Nginx配置Https安全认证的实现
2021/05/26 Servers
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
php实现自动生成验证码的实例讲解
2021/11/17 PHP