《前端之路》之 webpack 4.0+ 的应用构建

[TOC]

1、版本

当前 webpack 版本 ： v4.18.0

webpack -v
// 4.18.0
复制代码

同以前的版本不同的地方是须要 全局安装 webpack-cli

webpack-cli -v
// 3.1.0
复制代码

思考这个 webpack-cli 是真的有用么？ 其实对于我来说感受很鸡肋，虽然它是出现是为了让我webpack 零配置化，但就目前 webpack-cli 的体验来说，仍是比较鸡肋，在实际的开发过程当中，我仍是比较喜欢 diy ，这样自由的折腾方式， 零配置，就意味着你要为 高度定制化做出牺牲。

---

这让我想起了以前面试不少前端开发的时候，其实就是一个很简单的问题，如何搭建一个最简单的 webpack 的开发架构，JS 压缩一下， LESS 预编译一下， CSS 压缩一下。这类，不少习惯了用 vue-cli 的同窗就懵逼了，由于他们认为 架构就是用别人的东西，但实际的开发中，出于业务需求的须要，咱们的架构须要更加多的灵活性和高度可定制化性。 因此这才是写这篇文章的 出发点。

2、webpack 的主体概念

开局一张图：

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部建立一个依赖图(dependency graph)，用于映射到项目须要的每一个模块，而后将全部这些依赖生成到一个或多个bundle。

在开始前咱们须要先理解它的核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

2-一、入口

入口起点(entry point)

这里是一切开始的起点。面对实际的业务来说的话，能够分为单页面( SPA ) 和多页面。那么今天就针对这2种状况来分别 介绍下 利用 webpack 进行项目架构的须要注意的地方。

2-1-一、单页面入口

2-1-1-一、实现的写法：

webpack.config.js

module.exports = {
	entry: './app.js'
}
复制代码

2-1-1-二、一样也能够经过对象语法来解决不一样场景的问题：

webpack.config.js

module.exports = {
	entry: {
		app: './app.js',
		vendors: './src/JQ.js'
	}
}
复制代码

2-1-二、多页面应用的入口

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};
复制代码

可是这里只是人工的去配置了多页面，其实很明显这种作法很不聪明。 因此你须要一个聪明的作法，这里就大体讲一下思路。 经过 （ ' ./src/**/*.js' ） 匹配到 多页面到文件入口路径，而后 经过 glob.sync(globPath) 获取到所有路径，拿到每一个页面的 入口文件路径。 最后传值给 webpack 的 entry 对象。

2-二、输出

2-2-一、单页面 输出

webpack.config.js

module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
复制代码

2-2-二、多页面 输出

webpack.config.js

module.exports = {
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};
复制代码

2-三、loader

这里的 loader 就像一个又一个的加工厂同样，把你输送给 加工产的原材料加工生成你想要的成品或者半成品。最后出厂～

有用过 gulp 相似的构建工具等同窗 就很 容易理解，这里的一个个的 loader 就想当一一个个的 task， 这个任务完成就会交给下一我的，直到整个流水线工做跑完～

在更高层面，在 webpack 的配置中 loader 有两个特征（demo）：

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
}
复制代码

其中有三个须要注意的地方：

一、loader 的特征之一： test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

二、loader 的特征之二： use 属性，表示进行转换时，应该使用哪一个 loader。

三、在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules

2-3-一、如何编写一个 loader

前期这里也只是大概的了解一下，在后面的文章中，咱们会手把手的教你 手写一个 loader

这篇文章还只是教你如何使用 webpack。 敬请期待后面的文章吧 😁

2-四、plugins

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 没法实现的其余事。

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

复制代码

2-4-一、如何编写一个plugins

同样的，前期这里也只是大概的了解一下，在后面的文章中，咱们会手把手的教你 手写一个 plugins

这篇文章还只是教你如何使用 webpack。 敬请期待后面的文章吧 😁

3、如何使用

在上面的文章中，咱们已经大体介绍了 webpack 的概念，下面就是须要咱们来配置一个 能够实际使用的项目。

webpack基础配置项目地址

3-1 关于 resolve 解析的相关的疑问

3-1-1 resolve.alias

建立 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的经常使用模块：

module.exports = {
  //...
  resolve: {
    alias: {
	  'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, './src/src/'),
      'assets': path.resolve(__dirname, './src/assets/'),
      'components': path.resolve(__dirname, '../src/components')
    }
  }
};
复制代码

有了上面的配置后，在项目文件中若是须要引用 components 文件夹下面的某个组件的时候 就能够 直接 以下的引用方式：

import Alert from 'component/alert'
复制代码

这样就能够 忽略由于项目文件过深而引发的 引用组件路径出错的问题，从而加快效率。

3-1-2 resolve.extensions

自动解析肯定的扩展。默认值为：

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
};
复制代码

这样的话，就会帮你把未加上 后缀名的文件自动加上配置后缀，从而加快开发效率。

固然也是按照你所给出的文件路径去匹配的后缀，而不是随意加上后缀名。

关于 resolve 解析 的内容还有不少，你们能够参考 webpack 官方文档去寻找本身须要的内容，让本身开发项目的速度变得更加快捷方便。

4-1 优化(optimization)

在 4.0 之后的 webpack 版本，他们专门把 optimization 提取出来做为一个大的模块来进行了优化，由于这个功能实在是太能有效的提高项目的加载速度了。为何会这么说呢？下面咱们就来了解了解～

咱们先来看一个简单的配置：

module.exports = {
  //...
  optimization: {
    minimize: false
  }
};
复制代码

4-1-1 optimization.minimize

这个属性是一个 布尔类型，是告诉 webpack 咱们是否在当前环境下去压缩混淆咱们的 JS 代码。

固然 须要配合这个属性来使用的还有一个 插件 主要注意: UglifyjsWebpackPlugin

4-1-2 optimization.splitChunks

这个属性是在 webpack 4.0 + 才提供的。用来 分离切割 体积较大的 JS 文件。

而后 webpack 会自动将 通用的 chunk 进行分割，从而最大限度的作到 复用 ，从而减小 main chunk 的体积。

5-1 插件(plugins)

plugins 选项用于以各类方式自定义 webpack 构建过程。webpack 附带了各类内置插件，能够经过 webpack.[plugin-name] 访问这些插件。

webpack 插件列表。例如，当多个 bundle 共享一些相同的依赖，CommonsChunkPlugin 有助于提取这些依赖到共享的 bundle 中，来避免重复打包。这里仍是举例说明：

module.exports = {
  //...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-[hash].min.js',
    })
  ]
};
复制代码

这里 CommonsChunkPlugin 就会告诉 webpack 让它把 多个 bundle 共享一些相同的依赖，抽离出来，造成一个单独的 bundle 从而避免重复打包而带来的性能损耗。

6-1 开发中 server (devServer)

这里的重要部分就是 webpack-dev-server 这个插件了。

webpack-dev-server 建立当前本地开发的node环境，从而才能有上面种种 webpack 对于文件的操做权限，才能随心所欲，这个是基本。咱们仍是来一个最简单的 demo。

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,   
    port: 9000
  }
};
复制代码

这里面也有很是多的 属性配置，基本知足了咱们开发中遇到的大多数的问题。

4、总结

基本上完成了上面文章中介绍到的内容，咱们就已经能够完成基本的 webpack 配置的功能了， 注意： 这里说到的是 基本的 webpack 的配置工做，那么在咱们的实际的项目开发中，咱们会遇到的问题和须要咱们经过webpack 来解决的问题很是之多。

---

由于咱们须要结合一系列的框架来完成咱们的前端开发的工做，React、Vue、Angular、JQ，Backbone 等等等。 这系列的框架 风格各异，可是又万变不离其宗，核心须要注意的地方就那么多，下一篇文章就会 讲到一个 现代 前端开发 须要注意的一个重要 插件。 Babel 。

---

关于 webpack 入门的文章就介绍到这里了，欢迎一块儿来论道～

GitHub 地址：（欢迎 star 、欢迎推荐 : )

前端 webpack 4.0 的应用构建