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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
详解angular element()方法使用
Apr 08 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
Vue路由权限控制解析
Nov 09 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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/01/26 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
JavaScript中的数值范围介绍
2014/12/29 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现词法分析器
2019/01/31 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
品牌转让协议书
2014/08/20 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
员工福利申请报告
2015/05/15 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Golang 字符串的常见操作
2022/04/19 Golang