20K+中高级前端工程师必备的专项技能，将在这里揭晓.....

最近四火在浏览拉钩等招聘网站的时候，注意到了一个有趣的地方，身处一线城市的互联网公司都在要求前端开发工程师掌握一项技能--前端工程化！

通过上面的招聘简章，大家应该很清晰的看到了，企业对于工程化、自动化的开发的看重，你可以不精通但是必须的了解这一项技能！为什么在cmd命令行键入webpack 就可以打开一个本地的小型服务器？为什么不用认为引入js文件，工具帮你自动执行？

下面我给大家分享我对于Webpack的理解：

webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。 webpack分成四个部分，其中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js ，

总结一下，webpack共分为四个部分，这个概念一定要记好，本堂课就是围绕这四个配置进行展开的 :

* 入口  * 出口  * 加载器  * 插件

什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack能干什么

根据入口文件的依赖，加载所有模块js，然后合并成一个js;标准且纯粹的模块化打包工具 : 依赖一个文件为入口打包所有依赖为当前浏览器可用的代码。

WebPack和Grunt以及Gulp相比有什么区别

Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

1.Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

2.Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

webpack使用ES6模块语法

CommonJS与ES6模块区别

ES6标准发布后，标准的使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。commonjs模块和es6模块最主要的区别：1.commonjs模块是拷贝（能修改其值），es6模块是引用（只存在只读状态，不能修改其变量值）2.CommonJS模块是运行时加载，ES6模块是编译时输出接口。

语法区别

CommonJS：使用node运行js

//暴露数据的页面var num = 3; function fun() { return  "你好";} module.exports = { fun,num}; //引用模块的页面var demo=require("./demo")console.log(demo.fun());console.log(demo.num);​//------------exports暴露-----------------------//暴露数据的页面exports.num = 3;exports.fun=function(){return "你好";}//引用模块的页面var demo=require("./demo")console.log(demo.num);console.log(demo.fun());

 

ES6模块 （稍后使用webpack打包之后运行）

作用：

export和export default实现的功能相同，即：可用于导出（暴露）常量、函数、文件、模块等，以便其他文件调用。

区别：

1、export导出多个对象，export default只能导出一个对象

2、export导出对象需要用{ }，export default不需要{ }，如：

//暴露模块exportexport let num = 3;export function fun() {return "你好"}//使用模块import { num,fun } from './demo';console.log(num); console.log(fun());​ <!-- 页面引用 --> <script type="module" src="js.js"></script>//····························//使用export defaultvar text="你坏";export default text;//使用export default import model from "./model"console.log(model);

 

 

 

开始使用webpack

安装node 最低要求v8.9.4

安装webpack

Webpack可以使用npm安装，新建一个空的练习文件夹使用：

初始化：npm init

全局安装： npm install -g webpack-cli webpack

webpack-cli 来执行webpack相关的命令行。

webpack   webpack的核心模块

基本使用

在之前es6模块的语法之上，在当前路径下使用cmd输入：

webpack 打包的文件 -o 输出的文件（名字自己起）

大家发现打包成功了 新建html页面引用刚才的输入的js  看看是否成功；

问题：

编译时把代码压缩了起来，非常的贴心。但是美中不足的是存在一行警告 WARNING：

 

警告说你现在有两种模式，一种叫做production （默认生产环境）还有一种叫development （开发环境）这两种一个都没有。

webpack4新增了一个选项就是mode，必须选择是在生产环境production （自动压缩你的代码）和开发环境development （开发模式不会压缩你的代码）之中选择一个，那么我们如何选择哪？

webpack --mode development或者production  打包的文件 -o 输出的文件

 

 

简便方式打包

简便方式打包需要对文件夹和文件有所要求 首先文件夹名字必须叫src其次打包文件的入口文件必须交index.js

输入 在cmd中输 webpack --mode production 即可打包 会自动的把打包好的文件生成到dist文件夹下的main.Js中 

 

配置文件入口--出口

Webpack的配置文件叫 webpack.config.js

入口：entry

出口：output

基本格式：

module.exports={​entry:"./src/index.js",//入口​output:{ //出口​path:__dirname+"/dist",//文件夹​filename:"outindex.js"//生成的文件名​}

 

新建项目  创建index.Js写入

function demo(){​console.log("hello")​}demo()

 

结合上面的配置文件  cmd中运行webpack 查看结果

 

一次打包多个文件

之前只能打包一个文件，在项目中可能一次要打包多个文件 只需要修改webpack.config.js配置文件entry 与output的filename。

module.exports={​entry:{​index:"./src/index.js",//入口​indexa:"./src/indexa.js"​},​output:{ //出口​path:__dirname+"/dist",//文件夹​filename:"out[name].js"//生成的文件名​},​}

 

配置打包模式

Webpack4中有两种模式，一种叫做production （生产环境）还有一种叫development （开发环境）在每次打包的时候都要手动指定非常的麻烦

配置文件指定打包模式

module.exports={​entry:{​index:"./src/index.js",//入口​indexa:"./src/indexa.js"​},​output:{ //出口​path:__dirname+"/dist",//文件夹​filename:"out[name].js"//生成的文件名​},​mode:"development"//开发模式指定为开发模式 ​}

 

plugin插件

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

 

clean-webpack-plugin可以实现在打包时，清空原有的内容。

在之前打包的时候如果修改下输出的文件名字  会发现打包之后 之前的打包内容也在 如果想在打包的之后清空之前的内容可以使用clean-webpack-plugin这个插件

  1、下载

        cnpm install clean-webpack-plugin -D

  2、引入

        const  {CleanWebpackPlugin}  = require("clean-webpack-plugin");

  3、使用

    plugins:[//是一个数组 数组的每一项就是你使用的插件      new CleanWebpackPlugin()]

 

html-webapck-plugin插件

用到该插件的主要作用：

1.把打包成功的内容自动添加到指定html中不需要自己在向html中引用

 

使用：

html-webpack-plugin:插件需要依赖 webpack webpack-cli

  1、下载

        cnpm install webpack webpack-cli -D

        cnpm install html-webpack-plugin -D

2.引用

 const HtmlWebpackPlugin = require("html-webpack-plugin");

 

3.使用

plugins:[//是一个数组 数组的每一项就是你使用的插件​new CleanWebpackPlugin(),​new HtmlWebpackPlugin({​f:"./public/index.html",// 指定模板地址​hash:true,//为引入的地址增加后缀，用于清楚缓存​filename: "home.html",// 将打包后的文件名字进行重置，默认是index.html​title:"我在学习webpack"//向编译好的内容添加浏览器标题内容​})​]

4如果在配置中设置了title那么必须在对应的template 模版文件中添加，才能让title生效

<title><%= htmlWebpackPlugin.options.title%></title>

 

取消注释：如果template模版中有注释那么打包的内容也会有注释  在生产环境中不需要注释 那么就可以设置minify来配置

plugins:[//是一个数组 数组的每一项就是你使用的插件​new CleanWebpackPlugin(),​new HtmlWebpackPlugin({​template:"./public/index.html",// 指定模板地址​hash:true,//为引入的地址增加后缀，用于清楚缓存​filename: "index.html",// 将打包后的文件名字进行重置，默认是index.html​title:"我在学习webpack",//向编译好的内容添加浏览器标题内容​minify:{​removeComments:true,//去除注释​collapseWhitespace:true//压缩代码​}​})​]

 

webpack-dev-server

搭建一个开发中的服务器

安装：npm install -g webpack-dev-server

运行：webpack-dev-server

在浏览器运行:localhost:8080  浏览器就能看见public模版的内容

 

在webpack配置文件中添加   并且删除之前生成的dist文件夹 （会发现不会在生成那个文件夹了 因为这个是开发服务  所以就会把生成的内容保存在缓存中 ）

devServer:{​open:true,//在浏览器中自动打开​}

 

还可以配置

devServer:{​open:true,//在浏览器中自动打开​port:"8081",//设置端口​host:"127.0.0.1"//访问地址​}

 

如果觉得webpack-dev-server麻烦的话 可以使用package。json配置

 

Npm run start启动

 

 

Loaders加载器/打包器

加载器/打包器可以将不同的文件类型（如typescript，css、scss、图片以及对老版本/新版本的JavaScript）转换方便我们使用

 

style-loader与css-loader

webpack可以把以指定入口的一系列相互依赖的模块打包成一个文件，这里的模块指的不只是js，也可以是css；

style-loader引入css，css-loader动态创建style标签，塞到head标签里；

安装：npm install style-loader css-loader -D

新建一个assets的静态资源文件夹  ----》并且创建一个style.css文件写上样式

在js入口文件引用样式

import "../assets/style.css"

 

在webpack.config.js中配置

module:{​rules:[​{​test: /.\.css$/,//正则匹配css文件​//引用顺序不能变先加载css在插入到style中​loader:["style-loader","css-loader"]}]}

 

Less-loader/sass-loader

以上能支持css  less   sass也可以

Less

需要安装相关依赖：cnpm install less-loader less -D

在assets文件夹中创建less文件 并且在入口js引用

@yellow:yellow;​body{​background-color: @yellow;​}

在webpack。Config.js配置less

module:{​rules:[​{​test: /.\.less$/,​// 引用顺序不能变​loader:["style-loader","css-loader","less-loader"]​}​]​}

Sass

安装依赖  cnpm install sass-loader node-sass -D

在assets文件夹中创建style.scss文件 并且在入口js引用

​$yellow:yellow;​body{​background-color: $yellow;​}import "../assets/style.scss"{​test: /.\.scss$/,​// 引用顺序不能变//配置：loader:["style-loader","css-loader","sass-loader"]​}

 

 

babel-loader（非常重要）

ES6 语法在开发中已经非常普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babel 应运而生。babel-loader:就是把es6 es7等这些语法转换成普通浏览器可以识别的javascript代码。

下载：官方提供了两种一个版本是8 一个版本是7   我们使用最新的8

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

来进行使用

 

 

在webpack.config.js中添加

module: {​  rules: [​    {​      test: /\.js$/,​      exclude: /(node_modules|bower_components)/,//设置哪些文件不处理​      use: { //use设置需要什么loader​        loader: 'babel-loader',​        options: {          presets: ['@babel/preset-env']// 转换规则​        }​      }​    }​  ]​}

 

编写一个es6的内容尝试打包 用低版本ie测试是否可以正常运行。

 

 

Vue Loader

注意：Vue Loader 是一个Webpack的 loader，它支持 .vue 单文件组件的各个<template>、<script> 和 <style>打包成浏览器可以识别的内容

 

 

Webpack常见概念

webpack的基本能力：处理依赖、模块化、打包

1、依赖管理：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块

     2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，可以减少、优化代码的体积

     3、各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误

 

Webpack打包原理

webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件

    webpack怎么工作的过程：

         1、解析配置参数，合并从(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；

          2、注册配置中的插件，做出对应的反应；

          3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；

          4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；

           5、递归结束后得到每个文件最终的结果，根据entry 配置生成代码；

最后给大家推荐一个用来学习和交流的微信公众号：