【webpack】流行的前端模块化工具webpack初探

时间 2019-11-13

标签 webpack 流行前端模块化工具初探繁體版

原文原文链接

从开发文件到生产文件javascript

有一天我忽然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是能够提升开发的效率。但是浏览器它自己是并不可以“理解”这些语法的呀。就像下面这张图：

在开发代码文件 --> 生产代码文件的转换过程当中，咱们到底须要作些什么呢？没错，这一切都和webpack(或gulp)有关：

转一张webpack官网的图,webpack能把less/sass文件,json文件，乃至css文件，全都打包成js文件和静态资源文件（图片）

webpack和gulp的共同做用及二者的区别：

webpack和gulp本质上并非同一类型工具，但它们都能完成如下任务：

webpack:一个模块化工具（a module bundle）

gulp:一个任务运行器（a Task Runner）

在用react/vue/angular搭建单页面应用时，咱们能够用webpack代替gulp的工做，方便而快捷。二者具体的区别，在这里很少赘述，你们自行查阅资料。下面我主要介绍一下webpack的使用

除了利用webpack实现开发代码 --> 生产代码的转换，咱们为何要用它作其余一些工做，好比文件打包（文件合并），JS/css压缩呢？

为何要用webpack实现文件打包？

为何咱们要作文件打包的工做，这样作有什么意义吗？这要从咱们曾经喜闻乐见的<script>标签提及。对于许多初学者来讲，在每一个HTML页面里写入大量的<script>标签是再正常不过的事情。而后在部署上线时就会生成这样的HTML文件

<html>
  <body>
    <script src = 'http:// ...  a.js' />
    <script src = 'http:// ...  b.js' />
    <script src = 'http:// ...  c.js' />
    <script src = 'http:// ...  d.js' />
  </body>
</html>

咋看一下彷佛也没什么不对，可是仔细想一想，每一个页面都发起如此多的http请求，大量的页面叠加在一块儿，这将极大下降页面的性能，使页面加载得很慢。那么咱们想，能不能将无数个script文件合为一个（或几个）文件，这样请求数不就大大减小了吗？没错，webpack打包作的就是这样的做用

为何要用webpack实现JS压缩？

和打包同样，压缩文件也是为了提升页面性能，（你们可结合本身对那些打开极慢的网站的体验感觉一下页面性能的重要性）。使用webpack压缩文件时，它会作如下操做：

删除注释
删除空格（因此咱们偶尔会看到没有间隔或只有一行的JS代码）
缩短变量名，函数名和函数参数名（var myName = '彭湖湾'）-->var a = '彭湖湾'

这样作的好处：

减小文件体积，加快传输速度，提升页面性能
实现代码混淆，破坏其可读性，保护创做者的知识产权

（注：这一过程不可逆！须要事先作好备份工做）

为何要用webpack实现sass,less的编译和JSX模版文件的转换？

也就是上文提到的，经过webpack的转换，从浏览器没法“理解”的开发代码生成一份浏览器可以“理解”的生产代码

commonJS和AMD规范

从大量<script>的写法到webpack的普遍使用，实际上就是前端模块化发展的过程，而其间有两个主要的模块化标准commonJS和AMD,webpack是基于commonJS的，（固然也兼容写AMD，不过不推荐）下面是commonJS 的模块写法：

const moduleInput = require('moduleInpu')

//输入模块

module.exports = {

//输出模块

...

}

下面我就一一来介绍如何用webpack实现上述三种功能：

首先你得建立一个文件webpackTest,在终端进入目录，写入$ npm install webpack -g，安装成功

1文件打包（SPA-单页面应用程序）

1-1安装好webpack后建立这样一个目录：

1-2:向component各文件和dist/index.html文件写入内容

dist表示的是生产目录，component是开发目录，咱们平时开发时只在component目录下完成。dist/index.html是咱们手动建立的，内容以下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

咱们但愿经过webpack的文件打包，将component中的全部文件合并到dist/ab.js中来而后dist/index.html就能够引用dist/ab.js文件了。

component/a.js内容：

console.log('我是a.js文件');

component/b.js内容：

console.log("我是b.js文件");

component/ab.js内容：

require('./a')
require('./b')
console.log('我是ab.js,我require了a.js文件和b.js文件');

1-3向webpack.config.js中写入内容：

var path = require('path')
 
module.exports = {
    entry:{
       ab:'./component/ab.js',
    },
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist'),
    },
}

webpack要求webpack.config.js的输出模块为一个对象，且包含两大基本属性：entry和output。entry,顾名思义，入口文件，上面代码表示component／ab.js是入口文件，output/bundle.js是输出文件。因为component／ab.js引入（require）了a.js文件和b.js文件，这三个文件会被一块儿打包dist/bundle.js中，（注：entry中能够写入相对路径）

var path = require('path')
path.resolve(__dirname,'dist')

这段代码什么意思？path是node的内置模块，resolve是它的一个方法,__dirname表示当前目录在磁盘中的绝对路径，path.resolve(__dirname,'dist') = __dirname + '／dist' ，在个人mac里它至关于Users/penghuwan/myprogram/webpackTest/dist（注意：必须为绝对路径，不能为相对路径！）

1- 4 OK！该写的都写好了，接下来，在终端进入目录，写入webpack回车

component下的三个文件都被打包好了，再回来看看咱们的目录

多了一个dist/bundle.js的文件！让咱们看看里面有什么：

就是咱们独立写的a.js，b.js和ab.js打包后的dist/ab.js。

与此同时，咱们以前在dist/index.html里的 <script type="text/javascript" src="ab.js"></script></body>不就能够起到做用了吗？让咱们在磁盘里找到该文件打开，发现控制台输出了：

用图解描述上述过程,，webpack 递归地构建一个依赖树，这个依赖树包括你应用所需的每一个模块，而后将全部模块打包为少许的包(bundle) - 一般只有一个包 - 可由浏览器加载。

2多入口文件

2-1上述例子中，咱们只在entry中写入了一个入口文件，那咱们能不能一次写入多个入口文件呢？这固然是能够的，首先修改咱们在component的文件结构：

c.js/d.js/cd.js和a.js/b.js/ab.js结构上彻底一致，只是输出的文本不一样，这里很少赘述，而后修改咱们的webpack.config.js

var path = require('path')
module.exports = {
    entry:{
       ab:'./component/ab.js',
       cd:'./component/cd.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist'),
    },
}

这里的name是占位符[name]分别对应entry中写入的[ab]和[cd],这表示，在dist下生成的将再也不是上文提到的bundle.js，而是ab.js和cd.js两个JS文件

2-2再修改一下咱们的dist/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <script type="text/javascript" src="./ab.js"></script></body>
  <script type="text/javascript" src="./cd.js"></script></body>
</html>

2-3而后一样是进入终端，写入webpack再回车,回到目录，此时已经生成了dist/ab.js和dist/cd.js两个文件

2-4在浏览器中打开dist/index.html,输出：

用图解描述上述过程以下，因为引用关系创建的依赖书，a/b/ab和c/d/cd分别被打包为两个bundle并被引入dist/index.html

3为输出文件添加哈希值标记，避免相同文件从新加载

在先后两次在终端输入webpack打包时，即便component中的全部文件都没有变化，资源是要从新加载一遍的。同理，在生产中，每次须要在代码中更新内容时，服务器都必须从新部署，而后再由全部客户端从新下载。这显然是低效的，由于经过网络获取资源可能会很慢。那么咱们怎么才能避免这个问题呢———给output中的bundle文件提供hash值标记：

每次构建输出文件时，若是代码发生变化，输出的文件将生成不一样的hash值，这时将从新加载资源，但若是代码无变化，输出文件hash值也不变化，系统就会默认使用原来缓存的输出文件

3-1修改咱们的webpack.config.js:

var path = require('path')
 
module.exports = {
    entry:{
       ab:'./component/ab.js',
       cd:'./component/cd.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:path.resolve(__dirname,'dist'),
    },
}

打包后dist目录：（上个例子中的dist/ab.js和dist/cd.js已删掉）

写入hash值带来的新问题——每次都要更改dist/index.html中JS的src

由于咱们生成的hash是不断变化的，与此同时index.html必须不断更改<script>标签中的src的值

4解决hash值带来的新问题

4-1使用html-webpack-plugin插件,webpack.config.js的输出模块对象有一个plugins属性，它是一个数组，数组项是建立的plugin对象

在终端写入npm install html-webpack-plugin --save-dev,安装完毕后修改webpack.config.js的配置：

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
       ab:'./component/ab.js',
       cd:'./component/cd.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:path.resolve(__dirname,'dist'),
    },
    plugins:[
      new HtmlWebpackPlugin()
    ]
}

4-2在终端里输入webpack回车，打开咱们的dist/index,竟然已经自动写入了src带hash值的script标签！

【注意】此次的dist/index.html是webpack自动生成的,而之前的例子都是咱们手动写入的

5为生成的index.html指定模版

5-1但让咱们想想另一个问题，这个dist/html是自动生成的，咱们能不能作一些改造，好比指定一个模版。用开发开发文件中的component/index.html为模版生成dist.html呢？先建立一个component/index.html文件，写入：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>这是开发文件中的模版HTML</title>
  </head>
  <body>
</html>

5-2修改咱们的webpack.config.js:

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
       ab:'./component/ab.js',
       cd:'./component/cd.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:path.resolve(__dirname,'dist'),
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:'./component/index.html'
      })
    ]
}

5-3在HtmlWebpackPlugin的参数对象中写入template属性，指定为component/index.js,回到终端，写入webpack,而后让咱们看一看dist/index.html

用图解描述上述过程：

6用webpack打包多页面应用程序（MPA）

谈谈SPA（sing page application）与MPA（mutiple page aplication），SPA和MPA 指的是单页面应用程序和多页面应用程序，以前咱们打包的都是SPA，那么怎么打包MPA呢。很简单，在plugins中写入多个HtmlWebpackPlugin对象即可，这时候须要指明不一样文件的filename属性值，以及chunks属性值——它们对应的bundle文件

6-1改写一下咱们的webpack.config.js文件：

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
       ab:'./component/ab.js',
       cd:'./component/cd.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:path.resolve(__dirname,'dist'),
    },
    plugins:[
      new HtmlWebpackPlugin({
        filename:'ab.html',
        template:'./component/index.html',
        chunks:['ab']
      }),
      new HtmlWebpackPlugin({
        filename:'cd.html',
        template:'./component/index.html',
        chunks:['cd'] })
    ]
}

6-2打包后在dist中生成了dist/ab.html和dist/cd.html,浏览器打开ab.html,控制台输出：

浏览器打开cd.html,控制台输出：

图解上述过程：

【完】--喜欢这篇文章的话不妨关注一下我哟