34

前言

在很久很久以前,在我们前端还只是页面切图仔的年代,我们开发一个html页面,通常会遇到这些情况:

  • 需要引入十几个css和js文件,而且因为他们彼此间有着依赖关系,所以引入的顺序还不能乱。
  • 传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。
  • 代码复用性差,可维护性差。

此时就需要一个处理这些问题的工具,webpack应运而生。

webpack可以看做是模块打包工具:它将各种静态资源(比如:javaScript 文件,图片文件,css文件等)视为模块,它能够对这些模块进行解析优化和转换等操作,最后将它们打包在一起,打包后的文件可用于在浏览器中使用。

相关推荐

本人github: github.com/Michael-lzg
我的掘金:https://juejin.im/user/5b52fd...
从零开始构建一个webpack项目
总结几个webpack打包优化的方法

webpack的优点:

  • 代码转换: typeScript 编译成 javaScriptscss,less 编译成 css.
  • 文件优化:压缩 javaScriptcsshtml 代码,压缩合并图片。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 扩展性强,插件机制完善。

webpack打包过程:

1.利用babel完成代码转换,并生成单个文件的依赖
2.从入口开始递归分析,并生成依赖图谱
3.将各个引用模块打包为一个立即执行函数
4.将最终的bundle文件写入bundle.js中

Webpack 的四大核心:

  • entry:js 入口源文件
  • output:生成文件
  • loader:进行文件处理
  • plugins:插件,比 loader 更强大,能使用更多 webpack 的 api

Entry

webpack 应该使用哪个模块做为入口文件,来作为构建其内部依赖图的开始。进去入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的,每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

单⼊⼝:entry 是⼀个字符串

module.exports = {
  entry: './src/index.js'
}

多⼊⼝:entry 是⼀个对象

module.exports = {
  entry: {
    index: './src/index.js',
    manager: './src/manager.js'
  }
}

Output

告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,这些都可以在webpack的配置文件中指定。

单⼊⼝配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js’,
        path: __dirname + '/dist'
    }
};

多⼊⼝配置

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

通过[name]占位符确保⽂件名称的唯⼀

Loader

loaderwebpack 能够去处理那些非 javaScript 文件(webpack 自身只理解 javaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

loader的特点

  • 一个Loader 的职责是单一的,只需要完成一种转换
  • 一个Loader 其实就是一个Node.js 模块,这个模块需要导出一个函数
  • loader 总是从右到左地被调用。

常用的loader

处理样式

  • css-loader: 加载.css 文件,
  • style-loader:使用 style 标签将 css-loader 内部样式注入到我们的 html 页面
  • less-loader, sass-loader: 解析css预处理器

处理 js

  • 让你能使用最新的js代码(ES6,ES7...)
  • 让你能使用基于js进行了拓展的语言,比如React的JSX;

处理文件

处理图片资源时,我们常用的两种loader是file-loader或者url-loader,两者的主要差异在于。url-loader可以设置图片大小限制,当图片超过限制时,其表现行为等同于file-loader,而当图片不超过限制时,则会将图片以base64的形式打包进css文件,以减少请求次数

处理.vue文件

vue-loaderwebpack 的加载器模块,它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分,即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块(例如 sass 或 scss 加载器)提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。

开发一个loader

需求:手写一个 loader,将 'kobe' 转换成 'Black Mamba'。当然大家可以根据自己的需求进行设计。这里只是讲解方法。

1、编写 loader

在根目录下,新建目录 kobe-loader 作为我们编写 loader 的名称,执行 npm init -y 命令,新建一个模块化项目,然后新建 index.js 文件,相关源码如下:

module.exports = function(content) {
  return content && content.replace(/kobe/gi, 'Black Mamba')
}

2、注册模块

正常我们安装的 loader 是从 npm 下载安装,但是我们可以在 kobe-loader 目录底下使用 npm link 做到在不发布模块的情况下,将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下,让项目可以直接使用本地的 npm 模块。

npm link

然后在项目根目录执行以下命令,将注册到全局的本地 npm 模块链接到项目的 node_modules

$ npm link kobe-loader

注册成功后,我们可以在 node_modules 目录下能查找到对应的 loader

3、在 webpack 中配置 loader

webpack.base.conf.js 加上如下配置

{
  test:/\.js/,
  loader: 'kobe-loader'
}

此时,我们在所有 js 文件下书写的 'kobe' 就全部替换成 'Black Mamba'了。

4、配置参数

上面我们是写死的替换文案,假如我想通过配置项来改变,可以在 loader 中做以下调整

// custom-loader/index.js
var utils = require('loader-utils')
module.exports = function (content) {
  const options = utils.getOptions(this)
  return content && content.replace(/kobe/gi, options.name)
}

// webpack.base.conf.js
{
  test:/\.js/,
  use: {
    loader: 'kobe-loader',
    options: {
      name: 'kobe',
    }
  }
}

Plugin

专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。

Plugin 的特点

  • 是一个独立的模块
  • 模块对外暴露一个 js 函数
  • 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法 apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子,钩子的回调中能拿到当前编译的 compilation 对象,如果是异步编译插件的话可以拿到回调 callback
  • 完成自定义子编译流程并处理 complition 对象的内部数据
  • 如果异步编译插件的话,数据处理完成后执行 callback 回调。

常用Plugin

  • HotModuleReplacementPlugin 代码热替换。因为 Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server,后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面,HRM 是只更新修改的部分。
  • HtmlWebpackPlugin, 生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件,具体插入方式是将样式link插入到head元素中,script插入到head或者body中。
  • ExtractTextPlugin, 将 css 成生文件,而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象。
  • NoErrorsPlugin报错但不退出 webpack 进程
  • UglifyJsPlugin,代码丑化,开发过程中不建议打开。 uglifyJsPlugin 用来对 js 文件进行压缩,从而减小 js 文件的大小,加速 load 速度。uglifyJsPlugin 会拖慢 webpack 的编译速度,所有建议在开发简单将其关闭,部署的时候再将其打开。多个 html 共用一个 js 文件(chunk),可用 CommonsChunkPlugin
  • purifycss-webpack  。打包编译时,可剔除页面和 js 中未被使用的 css,这样使用第三方的类库时,只加载被使用的类,大大减小 css 体积
  • optimize-css-assets-webpack-plugin   压缩 css,优化 css 结构,利于网页加载和渲染
  • webpack-parallel-uglify-plugin   可以并行运行 UglifyJS 插件,这可以有效减少构建时间

开发一个 plugin

  • Webpack 在编译过程中,会广播很多事件,例如 run、compile、done、fail 等等,可以查看官网;
  • Webpack 的事件流机制应用了观察者模式,我们编写的插件可以监听 Webpack 事件来触发对应的处理逻辑;
  • 插件中可以使用很多 Webpack 提供的 API,例如读取输出资源、代码块、模块及依赖等;

1、编写插件

在根目录下,新建目录 my-plugin 作为我们编写插件的名称,执行 npm init -y 命令,新建一个模块化项目,然后新建 index.js 文件,相关源码如下:

class MyPlugin {
  constructor(doneCallback, failCallback) {
    // 保存在创建插件实例时传入的回调函数
    this.doneCallback = doneCallback
    this.failCallback = failCallback
  }
  apply(compiler) {
    // 成功完成一次完整的编译和输出流程时,会触发 done 事件
    compiler.plugin('done', stats => {
      this.doneCallback(stats)
    })
    // 在编译和输出的流程中遇到异常时,会触发 failed 事件
    compiler.plugin('failed', err => {
      this.failCallback(err)
    })
  }
}
module.exports = MyPlugin

2、注册模块

按照以上的方法,我们在 my-plugin 目录底下使用 npm link 做到在不发布模块的情况下,将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下,让项目可以直接使用本地的 npm 模块。

npm link

然后在项目根目录执行以下命令,将注册到全局的本地 npm 模块链接到项目的 node_modules 下

$ npm link my-plugin

注册成功后,我们可以在 node_modules 目录下能查找到对应的插件了。

3、配置插件

在 webpack.base.conf.js 加上如下配置

plugins: [
  new MyPlugin(
    stats => {
      console.info('编译成功!')
    },
    err => {
      console.error('编译失败!')
    }
  )
]

执行运行 or 编译命令,就能看到我们的 plugin 起作用了。

推荐文章

从零开始构建一个webpack项目
总结几个webpack打包优化的方法
总结移动端H5开发常用技巧
总结前端性能优化的方法
搭建一个vue-cli的移动端H5开发模板
封装一个toast和dialog组件并发布到npm
一文读尽前端路由、后端路由、单页面应用、多页面应用
浅谈JavaScript的防抖与节流

关注的我的公众号不定期分享前端知识,与您一起进步!


lzg9527
3k 声望8.1k 粉丝

专注web前端开发,熟悉html5,css3,javascript,vue,react