前言

在前端开发过程中，尤其是当初前端框架的频繁应用的当下，作为前端开发者想必对于Webpack的应用并不生疏，尤其是在应用Vue框架做前端开发的时候，打包时候必用Webpack。还有就是在前端求职面试的时候，Webpack相干的知识点也是面试官必然考查的，那么本篇博文就来分享一下对于Webpack应用相干的知识点，记录下来，不便前期查阅应用。

Webpack概念

Webpack其实是一个前端资源加载/打包工具，也就是自动化打包解决方案，即模块打包机，它将依据模块的依赖关系进行动态剖析，而后将这些模块依照指定的规定生成对应的动态资源，也就是把某些浏览器中不能间接运行的拓展打包成适合的格局来不便浏览器间接应用。

备注：Webpack也就是一个打包模块化的工具，在Webpack外面所有文件皆为模块，通过loader转换文件，应用plugin注入钩子，最初输入由多个模块组合成的文件。

Webpack打包原理

在我的项目开发过程中，大抵分为两个状态：开发状态和生产状态。在这两种状态下，webpack在打包编译的时候，会采纳不同的形式，比方代码是否压缩等。与这两种状态绝对应，webpack的配置文件也要分为两个，一个用于开发时候的配置，一个用于上生产时候的配置。然而理论开发过程中，个别不是定义两个配置文件，而是三个，别离为：开发配置、生产配置和私有配置。这样比拟便于管理webpack，更清晰地区分不同模式下的编译。

Webpack打包原理：把所有依赖打包成一个bundle.js，通过代码宰割成单元片段按需加载。

Webpack核心内容

Webpack的外围次要有以下几个局部：

  • mode—模式。development / production模式 ，依据模式来设置mode参数，能够启用相应模式下的 webpack 内置的优化。
  • entry—入口。以后我的项目应该应用何模块，来作为构建其外部依赖的开始，即指定打包入口文件。
  • output—进口。设置输入它所创立的 bundles，以及如何命名这些文件，默认值为 ./dist。
  • loader—加载器。让webpack可能去解决那些非js文件，起因是webpack本身只能辨认js。
  • plugin—插件。能够用于执行范畴更广的工作。插件的范畴包含，从打包优化和压缩，始终到从新定义环境中的变量。

另外，Webpack次要文件组成：

  • entry 入口，构建我的项目的终点地位，默认为./src/index.js
  • output 进口，打包之后的输入地位，默认为./dist
  • loader：加载器，让webpack领有了加载和解析非JavaScript文件的能力
  • babel-loader：把 ES6 转换成 ES5
  • image-loader：加载并且压缩图片文件
  • css-loader：解析 CSS
  • plugin：插件,扩大webpack的性能，让webpack具备更多的灵活性。
  • define-plugin：定义环境变量
  • html-webpack-plugin: 压缩html

Webpack的装置

Webpack的装置，首先要确保曾经装置了Node.js，因为Node.js自带了软件包装置工具npm。间接在电脑终端中输出命令行:node -v （查看以后node版本，而且要确保node版本大于8.9）

Webpack打包流程

Webpack打包流程分为：初始化参数、编译模块、输入资源。模块热更新，可使代码批改过后无需刷新浏览器就可部分更新，是高级版的主动刷新浏览器。次要的从启动到完结会顺次执行以下流程：

1、全局装置Webpack

首先指定以后装置的版本是3.6.0，因为脚手架3.0依赖是该版本，命令行如下：

npm install webpack@3.6.0-g

2、部分装置Webpack

部分装置Webpack，应用--save-dev 开发的时候依赖，开发阶段才会用到，我的项目真正公布运行之后就不会再应用。

①在我的项目中装置部分的Webpack。脚手架降级到3.0就是Webpack4，配置文件会被暗藏，查看不不便。具体命令行如下所示：

npm install webpack@3.6.0--save-dev

②通过node_modules/.bin/webpack启动webpack打包。这个比较复杂，若想简略，须要在package.json中定义启动。具体步骤如下所示：

在package.json的scripts中定义执行脚本。package.json中的scripts的脚本在执行时，会依照肯定的程序寻找命令对应的地位。首先会寻找本地node_modules/.bin门路中对应的命令，若没有找到，会去全局的环境变量中持续寻找。（执行bulid指令：npm run build），文件内容如下所示:

{  "name": "wechatui",  "version": "3.0.0",  "description": "",  "author": "",  "private": true,  "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "test": "node build/test.js",    "pre": "node build/pre.js",    "build": "node build/build.js"  },  "devDependencies": {    "webpack": "^3.6.0",   }}

Webpack的设置

1、定义webpack私有配置文件

webpack的私有配置文件的作用：就是将开发环境和生产环境独特的配置抽离进去。比方js文件和css文件的编译规定，编译的入口文件等。上面举一个简略的私有配置文件： webpack.base.js的例子，具体代码如下所示：

let path = require("path");let Webpack = require('webpack');module.exports = {    entry: "./src/index.js",    // 打包的入口文件，默认是src目录下的index.js文件    output: {       // 配置文件默认是dist目录下的main.js文件        filename: “out.js",     // 进口文件的文件名        path: path.resolve(__dirname, "build"), //进口文件门路    }}

私有配置文件实现之后，个别是不必这个文件进行webpack编译的，而是在此基础之上，再去定义开发环境的配置和生产环境的配置。

2、定义开发环境和生产环境的配置文件

须要应用一个第三方包： webpack-merge ，该包的作用就是把两个webpack配置文件合并成一个，用于开发或者生产环境的配置。执行以下命令装置该包：

npm i webpack-merge

装置实现之后就能够应用了。比方在 webpack.base.js 文件的根底上定义开发环境的配置 webpack.dev.js，就能够应用如下的写法：

let { smart } = require("webpack-merge");  // 引入smart办法 let base = require("./webpack.base.js");  // 引入私有配置文件module.exports = smart(base, {        mode: "development",    devServer: {        port: 3000, // 指定开发服务器的端口        progress: true, // 显示开启本地服务器的进度        contentBase: "./build", // 指定本地服务默认关上目录        compress: true, // 是否对代码进行压缩    },});

应用 webpack-merge 包能够将之间的配置文件作为参数，联合最新的配置参数，造成一个新的配置文件。采纳这种形式，能够在我的项目中将开发配置、生产配置和私有配置拆散成不同的文件，方便管理我的项目，进步开发效率。

进步webpack构建速度

在前端构建版本的时候，为了进步webpack构建速度，能够做以下解决：

  • 优化构建时的搜寻门路；
  • 把不须要打包的插件换成全局"script"标签引入的形式；
  • babel-loader开启缓存；
  • 通过externals配置来提取罕用库。

Webpack长处

Webpack的长处有很多，具体如下所示：

  • 专一于解决模块化的我的项目，能做到开箱即用，做到一步到位；
  • 扩展性很强，插件机制很欠缺；
  • 它的应用场景不局限于web开发；
  • 能被模块化的不仅有JS ，还有scss、TypeScript等。

Webpack毛病

事物都有两面性，有长处，就必定有毛病。Webpack的毛病：只能用于采纳模块化开发的我的项目，有很大的局限性。

最初

通过本文的介绍，在前端开发中对于webpack的应用就得心应手了，尽管该知识点比拟难而且面比拟广，然而重要和罕用，尤其是对于刚接触前端开发不久的开发者来说更是如此，所以相对把握该知识点是很有必要的，不论是在理论开发中还是在前端求职面试中与webpack相干的都是必备知识点，它的重要性不再赘述。欢送关注，共同进步。

本文参加了「SegmentFault 思否写作挑战赛」，欢送正在浏览的你也退出。