1.2.1 开发准备
在进入Webpack世界之前，我们先来用原生的方法构建一个Web应用。
一个JavaScript文件，编写一段通用的函数helloWorld：
02-setup-app/src/hello-world.js
function helloWorld() { console.log('Hello world') }
再创建一个JavaScript文件，调用这个函数：
02-setup-app/src/index.js
helloWorld()
最后创建一个 html 页面去引用这两个JS文件：
02-setup-app/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>千锋大前端教研院-Webpack5学习指南</title> </head> <body> <!-- 注意这里的js文件的引用顺序要正确 --> <script src="./src/index.js"></script> <script src="./src/hello-world.js"></script> </body> </html>
正常同步的 JavaScript 代码是按照在页面上加载的顺序执行的，上面html文件先引用 index.js文件，后引用 hello-world.js 文件，由于两个文件的代码存在先定义后才能调用的顺序关系，所以浏览器运行后会报以下错误：
调整 JS 文件的引用顺序：
<body>
<!-- 注意这里的js文件的引用顺序要正确 -->
<script src="./src/hello-world.js"></script>
<script src="./src/index.js"></script>
</body>
在浏览器运行后输出如下：
如果页面引用的JS文件很少，我们可以手动的来调整顺序，但页面一旦引用大量的JS文件，调整顺序的心智负担和工作量可想而知，如何解决？我们就要有请 Webpack了。
1.2.2 安装 Webpack
- 前提条件
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。 使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能， 或者缺少相关 package。
你可以选择下载适合自己平台的安装包，自行安装即可，本文不再赘述。
- 本地安装
最新的 webpack 正式版本是：
要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
# 或指定版本
npm install --save-dev webpack@<version>
提示：
是否使用
--save-dev取决于你的应用场景。假设你仅使用 webpack 进行构建操作，那么建议你在安装时使用--save-dev选项，因为可能你不需要在生产环境上使用 webpack。如果需要应用于生产环境，请忽略--save-dev选项。
如果你使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目，我们建议本地安装。这可以在引入重大更新(breaking change)版本时，更容易分别升级项目。 通常会通过运行一个或多个 npm scripts 以在本地 node_modules 目录中查找安装的 webpack， 来运行 webpack：
"scripts": {
"build": "webpack --config webpack.config.js"
}
提示：
想要运行本地安装的 webpack，你可以通过
node_modules/.bin/webpack来访问它的二进制版本。另外，如果你使用的是 npm v5.2.0 或更高版本，则可以运行npx webpack来执行。
- 全局安装
通过以下 NPM 安装方式，可以使 webpack 在全局环境下可用：
npm install --global webpack
提示：
不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。
- 最新体验版本
如果你热衷于使用最新版本的 webpack，你可以使用以下命令安装 beta 版本， 或者直接从 webpack 的仓库中安装：
npm install --save-dev webpack@next
# 或特定的 tag/分支
npm install --save-dev webpack/webpack#<tagname/branchname>
提示：
安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。
- 我们的安装
根据以上的各种情景，在我们的项目中安装 Webpack：
# 当前目录: 任意你的目录/webpack5
[felix] webpack5 $ npm install webpack webpack-cli
1.2.3 运行 Webpack
Webpack安装好了以后，就可以在项目环境里运行了。在运行之前，我们先修改一下代码：
03-try-webpack/src/hello-world.js
function helloWorld() { console.log('Hello world') } // 导出函数模块 export default helloWorld
03-try-webpack/src/index.js
// 导入函数模块 import helloWorld from './hello-world.js' helloWorld()
03-try-webpack/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>千锋大前端教研院-Webpack5学习指南</title> </head> <body> <script src="./src/index.js"></script> </body> </html>
进入项目目录，运行 Webpack，结果如下：
[felix] 03-try-webpack $ npx webpack
asset main.js 50 bytes [emitted] [minimized] (name: main)
orphan modules 81 bytes [orphan] 1 module
./src/index.js + 1 modules 135 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.54.0 compiled with 1 warning in 197 ms
在这里，我们在没有任何配置的情况下运行 Webpack（通常你会为 Webpack 提供一个配置文件，现在，自Webpack4 开始，可以使用默认配置来打包文件了）。
这里还有一个警告：“mode” 选项尚未设置。我们将在本课程后面讨论“mode”选项。
从结果来看，webpack 为我们生成了一个main.js文件，具体见下图：
我们来看一下 main.js里有什么：
03-try-webpack/dist/main.js
(()=>{"use strict";console.log("Hello world")})();
生成的代码非常简洁。这时你可能不禁会问，这个代码是从哪些文件里生成出来的呢？回到终端，我们再运行一下命令：
[felix] 03-try-webpack $ npx webpack --stats detailed
PublicPath: auto
asset main.js 50 bytes {179} [compared for emit] [minimized] (name: main)
Entrypoint main 50 bytes = main.js
chunk {179} (runtime: main) main.js (main) 180 bytes [entry] [rendered]
> ./src main
orphan modules 103 bytes [orphan] 1 module
./src/index.js + 1 modules [860] 180 bytes {179} [depth 0] [built] [code generated]
[no exports]
[no exports used]
......
我们看到， asset main.js 是从入口 > ./src main 生成的。那么，我们能自己配置这个入口吗？请看下一节，自定义 Webpack 配置。
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
