[下班再看点什么] 浅入浅出webpack 核心名词

为何我想了解 webpack？

不知道你是否也会好奇，不论是透过vue-cli或是react-create-app建立的专案 ，只要执行:

npm start / npm run serve

需要转译的档案也能直接被使用、多个模组化的 .js档 也不需要透过加入<script> 或是 import 之类的方式引入使用呢？

我有一个大胆的想法！都是打包工具（如 webpack） 在背后… 处理。

---

所以 webpack 会做什么？

webpack 是一个静态模组打包工具，它的功用是把前端开发时用到的诸多静态资源（如 .js, .css, .png等档案类型）进行打包 (bundle)。

v4.0 以后 webpack.config.js 不再是必备的设定，而是当专案需要客製化打包设定时再加入即可。

了解了上述的基本概念外，你一定要知道的核心名词：

entryoutputloadersplugins （抱歉我还没看也不懂，这次不会分享）mode

下面会各别进行介绍：

---

Entry

引入自官方文件

An entry point indicates which module webpack should use to begin building out its internal dependency graph.

可以理解为入口点(entry point) ，用来指示 webpack 以哪个档案作为打包(bundle)的位置。你可以透过 entry 这个属性去自定义打包路径。其中路径又可分为：单一打包路径以及多打包路径。

//webpack.config.js//单一路径的写法：module.exports = {  //1.字串写法  entry:"./src/index.js",  //2.阵列写法  entry:["./src/index.js"]}//多路径的写法module.exports = {  //物件写法  entry:{    default:'./src/index.js',    main:'./src/main.js',  }}

注意：当没有特别设定时，预设会产生 单一打包路径 ：./src/index.js

---

Output

决定打包后的档案放置位置、档案名称，它有以下两个参数：

path: 设定档案放置路径（官方文件是使用 nodejs 内建的方法）fileName: 输出的档案名称

//webpack.config.jsconst path = require('path');module.exports = {  entry:{    default:'./src/index.js',    main:'./src/main.js',  },  output:{    path: path.resolve(__dirname, "dist")    fileName:''  }}

当没有特别设定时，预设的输出路径为：/dist/main.js

---

Loader (modules)

要知道 webpack 本身只能编译 .js跟 .json两种档案类型，但实际上一般专案需打包内容远不止如此，常见要打包的还有像是 .scss , 各种图档.png 。就是需要透过载入各种 Loader 来进行处理：

test: 档案处理的条件（常使用：正则）use: 负责处理的套件 ( 例如： sass-loader )

白话来说就是符合 test条件的内容，会启动 use 载入模组进行处理

//webpack.config.jsmodule.exports = {  entry:{    default:'./src/index.js',    main:'./src/main.js',  },  output:  {    path: path.resolve(__dirname, "dist")    fileName:''  },  modules:{    rules:   [    {      test:/\$/g,      use:'sass-loader'    },   ]  }}

---

Mode

透过设定 mode去告知 webpack 现在要使用哪个内建的环境参数，有 production, development, none

module.exports = {  entry:{    default:'./src/index.js',    main:'./src/main.js',  },  output:  {    path: path.resolve(__dirname, "dist")    fileName:''  },  modules:{    rules:   [    {      test:/\$/g,      use:'sass-loader'    },   ]  },  mode:'development'}

mode的预设值为 production

小结

首先，恭喜你完成一个最最基础的 webpack.config.js 设定了。
虽然你现在应该连自己的小作品也不敢打包，更不用说是专案。

没关係，下一篇就让小的我来打包自己的小作品给你看吧？

---

参考资料:

浅谈 Bundle、与Vue-CLI

[note] Webpack 学习笔记