2020年你不能不知道的webpack基本配置

前言

在好久好久之前，在咱们前端还只是页面切图仔的年代，咱们开发一个html页面，一般会遇到这些状况：

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

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

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

相关推荐

本人github: github.com/Michael-lzg

从零开始构建一个webpack项目

总结几个webpack打包优化的方法

webpack的优势：

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

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

loader 让 webpack 可以去处理那些非 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-loader 是 webpack 的加载器模块，它使咱们能够用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块容许 webpack 使用单独的加载器模块（例如 sass 或 scss 加载器）提取和处理每一个部分。该设置使咱们可使用 .vue 文件无缝编写程序。

开发一个loader

需求：手写一个 loader，将 'kobe' 转换成 'Black Mamba'。固然你们能够根据本身的需求进行设计。这里只是讲解方法。

一、编写 loader

在根目录下，新建目录 kobe-loader 做为咱们编写 loader 的名称，执行 npm init -y 命令，新建一个模块化项目，而后新建 index.js 文件，相关源码以下：

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

二、注册模块

正常咱们安装的 loader 是从 npm 下载安装，可是咱们能够在 kobe-loader 目录底下使用 npm link 作到在不发布模块的状况下，将本地的一个正在开发的模块的源码连接到项目的 node_modules 目录下，让项目能够直接使用本地的 npm 模块。

npm link
复制代码

而后在项目根目录执行如下命令，将注册到全局的本地 npm 模块连接到项目的 node_modules 下

$ npm link kobe-loader
复制代码

注册成功后，咱们能够在 node_modules 目录下能查找到对应的 loader。

三、在 webpack 中配置 loader

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

{
  test:/\.js/,
  loader: 'kobe-loader'
}
复制代码

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

四、配置参数

上面咱们是写死的替换文案，假如我想经过配置项来改变，能够在 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，例如读取输出资源、代码块、模块及依赖等；

一、编写插件

在根目录下，新建目录 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
复制代码

二、注册模块

按照以上的方法，咱们在 my-plugin 目录底下使用 npm link 作到在不发布模块的状况下，将本地的一个正在开发的模块的源码连接到项目的 node_modules 目录下，让项目能够直接使用本地的 npm 模块。

npm link
复制代码

而后在项目根目录执行如下命令，将注册到全局的本地 npm 模块连接到项目的 node_modules 下

$ npm link my-plugin
复制代码

注册成功后，咱们能够在 node_modules 目录下能查找到对应的插件了。

三、配置插件

在 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的防抖与节流

关注的个人公众号不按期分享前端知识，与您一块儿进步！