关于challenge:前端开发关于Webpack的使用详解

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

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

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

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

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

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

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

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

npm install webpack@3.6.0-g

部分装置 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 的私有配置文件的作用：就是将开发环境和生产环境独特的配置抽离进去。比方 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 编译的，而是在此基础之上，再去定义开发环境的配置和生产环境的配置。

须要应用一个第三方包：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 构建速度，能够做以下解决：

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

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

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

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

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

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

关于challenge:前端开发关于Webpack的使用详解

前言

Webpack 概念

Webpack 打包原理

Webpack 核心内容

Webpack 的装置

Webpack 打包流程

1、全局装置 Webpack

2、部分装置 Webpack

Webpack 的设置

1、定义 webpack 私有配置文件

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

进步 webpack 构建速度

Webpack 长处

Webpack 毛病

最初