webpack核心

前言

一句话讲明webpack是什么？

webpack是整合众多语法及技术的建置工具

webpack 是JavaScript 应用程式的模组打包器。

翻译：webpack 本身只看得懂 JavaScript 与 Json 档，对于其他的模组，需要借助 Loaders 帮忙解析。

webpack 解决了什么问题？

• 利用打包过程解决模组化问题：webpack 为了可以产生 bundle ，它会解析模组与模组间的相依关系
• 利用 Loaders 解决新技术载入问题：webpack 的Loaders 的作用就是转换各模组成为 webpack 能理解的模组

核心概念 - webpack 中任何东西皆为模组

以.js、.css、.png、.svg… 等各种档案在 webpack 内都是一个个的模组。

将万物皆模组的概念放在心上， webpack 的学习就变得十分简单了。

插件

webpack 在建置的过程中，会依序触发不同的事件钩子，借以完成各个时期的工作，而 Plugins 可以借着这些事件钩子执行其所设定的工作。

Plugins 使得 webpack 有了更强大的能力，小如建置前清空输出资料夹、注入环境变数、产生 html 档案，大如配置最佳化等，都与 Plugins 有关系。

模式

mode预设为production。

webpack 在建置时会依照 mode 设定的不同而进行不同的最佳化设定：

• production: 以生产环境为目标，做 Tree Shaking, Minify… 等以执行效能为导向的最佳化
• development: 以开发环境为目标，做 Source Map 等以开发便利为导向的最佳化

entry，output，loader

entry的预设值为./src/index.js。

output的预设路径是./dist，而主要的 bundle 名称会是./dist/main.js。

webpack 的Loaders 的作用就是转换各模组成为 webpack 能理解的模组 webpack 为了可以产生 bundle ，它会解析模组与模组间的相依关系

## 帮我们产生 webpack 为基底的起始专案。他会以交互问答的方式完成专案的配置：
npm install webpack webpack-cli @webpack-cli/init@0.2.2
npm install webpack webpack-cli --save-dev

##webpack CLI 会将 root 目录下的 webpack.config.js 做为预设的配置档。如果要指定其他配置档的话，可以下 --config 指令：
webpack --config webpack.config.prod.js

npm install http-server --save-dev
## 改为模组化编程
npm install lodash -D

npm install file-loader --save-dev
##CopyWebpackPlugin可以帮助我们把档案从 A 地复制到 B 地，我们告诉 CopyWebpackPlugin 要把 public 目录中的档案复制到 dist 目录中
npm install copy-webpack-plugin --save-dev 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

 "scripts": {"build": "webpack"}npm run build 
1