前言
在前端开发领域独立负责项目已有不少，从刚开始的angular1.x到vuejs再到react，前端常用的三大框架都有接触。用过的人都知道这三个框架的使用都离不开webpack，从本地开发到线上部署，webpack给我们带来了很大的方便，所以说精通webpack是现如今前端的必备技能之一，本章总结下自己对webpack知识体系的认知。
wepback基本知识
先来张思维导图，内容不太全后续会继续更新。
简单的说webpack就是一个模块打包器，但是它具备但功能不仅仅是打包，图片压缩，语法转换，开发工具等等，总的说来webpack是前端工程师实现前端架构一个构建工具，有了webpack能让我们前端架构更快更合理的实现。
功能
- 转换语法：如typescript/vue/jsx/es6等语法转换成浏览器识别的语法
- css预处理：
- 代码压缩混淆：提高了项目的性能以及代码的安全性（对比未混淆之前的项目混淆后源码相当于不可见）。
- 图片压缩
- 提升代码可维护性：代码更统一（如用eslint配合约束代码）。
- 提升开发效率：各种开发工具，方便前端工程师本地开发联调。
核心概念
- 入口：指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。
- 输出：指示webpack在哪里输出它所创建的 bundles。
- loader：loader 让 webpack 能够去处理那些非 JavaScript 文件。
- 插件：webpack功能的扩展，可以用来处理各种各样的任务。
基本使用方式
初始化
- 安装nodejs
- 新建项目目录
- 初始化package.json
npm init
- 安装webpack等相关依赖
配置
- 入口的配置,是在webpack.config.js的modules中的entry,定义wepack的入口文件
module.exports = { //入口文件的路径 entry: './index.js' };
- 可以配置多入口
module.exports = { //入口文件的路径 entry:{ home: "./home.js", about: "./about.js", contact: "./contact.js" } };
- loader（module）配置,loader的配置是在webpack.config.js的modules中的test 属性，用于标识出应该被对应的 loader进行转换的某个或某些 文件。另外use 属性，表示进行转换时，应该使用哪个 loader。
const path = require('path'); const config = { output: { filename: 'test.txt.bundle.js' }, //loader定义 module: { rules: [ //test中可以传入正则来匹配 { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config;
注：loader的作用简单来说就是将本地文件（vue，jsx，ts）转换成浏览器识别的文件,即loader 用于对模块的源代码进行转换。
- plugin 配置插件,插件的配置是在webpack.config.js的plugins中的，例如：
plugins:[ //自动生成html文件 new HtmlWebpackPlugin({ title: 'html management' }), ]
注：插件主要是webpack功能的扩展，比如自动生成html，本地服务器...
- output配置文件输出路径,输出的配置是在webpack.config.js的modules中的output对象中,定义文件输出的位置，例如：
output:{ filename:'[name].bundle.js', path:path.resolve(__dirname,'dist'), //该配置能帮助你为项目中的所有资源指定一个基础路径,正常会设置为根目录 publicPath:'/' }
- resolve配置模块解析，这些选项能设置模块如何被解析。resolver是一个库(library)，用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块，然后被后者引用。灵位resolve有以下常用属性：
//1.ailas：创建 import 或 require 的别名，来确保模块引入变得更简单 //2.extensions：自动解析确定的扩展。默认值为[".js", ".json"] //3.modules：告诉 webpack 解析模块时应该搜索的目录。 //4.plugin：应该使用的额外的解析插件列表。 resolve:{ ailas:{ component:path.resolve(__dirname, 'src/component/') }, extensions:[".json",'.jsx','.js'], module:['node_modules'], plugins:[ //提供全局的变量，在模块中使用无需用require引入 new webpack.ProvidePlugin({ $: "jquery" }) ] }
运行
- 为了方便开发，我们会根据当前环境设置不同的配置文件（或者同一个文件设置不同的配置内容），然后在package.json的scripts中设置相关命令，例如：
scripts:{ "start":"webpack --config webpack.dev.conf.js", "build":"webpack --config webpack.conf.js" }
webpack相关
targets
因为服务器和浏览器代码都可以用js编写，所以webpack提供了多种构建目标(target)，常用的有web（默认值） node。其他目标类型请查看文档
//编译为类 Node.js 环境可用（使用 Node.js require 加载 chunk） target:'node' //自定义目标，可以传入个函数通过插件来自定义目标 target: (compiler) => { compiler.apply( new webpack.JsonpTemplatePlugin(options.output), new webpack.LoaderTargetPlugin("web") ); }
devtool的设置
此选项控制是否生成，以及如何生成 source map。默认为false,常用的配置有：soure-map inline-source-map 其他 devtool属性 请查看文档
//不生成原始源代码的source.map.*文件，而是合并到bundle文件中 devtool:"inline-source-map" //生成一份包含原始源代码.source.map.*文件 devtool:"source-map"
externals
此配置选项提供了「从输出的 bundle 中排除依赖」的方法 。即当需要引用一个库，但是又不想被打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。，例如：
//html中 <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"> </script> //配置中可以这样设置：表示应该排除 import $ from 'jquery' 中的 jquery 模块。 externals: { jquery: 'jQuery' } //代码中正常的使用 import $ from 'jquery'
常用npm包介绍
如果想要精通webpack，那掌握nodejs基础是我们绕不过的坎，一下几个npm包和node api个人认为必须要会使用的：
- path
//连接文件路由使其成为绝对路径 path.resolve(__dirname,'index.js')
- fs：文件的读取/复制/删除/新建等操作
- inquirer：交互式命令包
- chalk：console输出字体颜色的设置
常用插件
- HtmlWebpackPlugin：生成html文件
- CleanWebpackPlugin:清除上一次生成的文件
- WebpackDevServer：本地服务启动
- EnvironmentPlugin：设置环境变量的值
- HotModuleReplacementPlugin：模块热替换插件
本节只是简单介绍下常用的插件，关于插件我会用单独的一章来介绍。详细文档请查看
总结
随着前端工程化的发展，webpack的使用熟练与否也成为了判断是否是一名合格的前端开发的标准之一，通过对webpack进一步的学习是我了解了他不仅仅是一个前端打包工具。本系列文章是自己对webpack一些浅显的认识。
