Webpack 是 web 应用程序的打包器。在过去，你必须在 HTML中手动链接 JavaScript 文件。现在，Webpack负责来解决这个问题。在本教程中，我将带你在一个 JavaScript + HTML 应用程序上完成迷你化的 Webpack 配置。之后，你应该能够自己扩展 Webpack 特性，改进你的 JavaScript 应用，或者你自己站点。
项目文件/文件夹结构
我们将从创建一个distribution文件夹开始。稍后，这个文件夹将用于为你的应用程序提供服务在本地或远程web服务器。为应用程序提供服务，这样就可以在浏览器里查看它，也可以将它托管在外部服务器上，这样每个人都可以通过HTTP访问它。毕竟，distribution文件夹是发布web应用程序所需要的一切。首先，在项目的根目录下用命令创建distribution文件夹和一个HTML文件作为你应用程序的入口点：
mkdir dist
cd dist
touch index.html
文件的名称由你决定。通常会发现它被命名为dist，public或build。你还可以自己给HTML起一个名字。然而，将其命名为index.html是一种广泛使用的命名约定。下一步，为创建的dist/index.html提供如下内容：
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
</div>
</body>
</html>
该文件包含了浏览器中你的站点显示所需的所有HTML。这里目前还没有涉及到JavaScript。为了让你开始使用JavaScript，将下列日志记录放到src/index.js文件中：
console.log('Hello Webpack Project.');
现在，你的项目应该有一个dist/和src/文件夹：
- dist/
-- index.html
- src/
-- index.js
- package.json
你可能会想：为什么我们不把所有的文件都放到一个文件夹里呐？这是因为在接下来的步骤中，我们将确保src/文件夹中的所有JavaScript源代码文件都将被绑定到一个单独的JavaScript文件中，该文件将自动放置到dist/文件夹中。通过保持文件夹的分离，你可以确保将应用程序带到web服务器上生产所需的所有内容都位于dist/文件夹中，而实现应用程序所需的所有内容都位于/src文件夹中。
现在，将JavaScript链接到HTML文件最直接的方法是：
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
</div>
<script src="../src/index.js"></script>
</body>
</html>
然而，随着时间的推移，这可能会变成一项重复乏味的工作，因为你必须追踪你的HTML链接了哪些JavaScript文件。这就是为什么我们使用Webpack把src\文件夹中的所有源码生成为一个JavaScript包，这个包随后自动放入dist/文件夹中。然后，它可以使用如下方式作为HTML文件的入口点：
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
</div>
<script src="./bundle.js"></script>
</body>
</html>
因此，我们需要配置Webpack为我们打包源码。下面就让我们进入Webpack吧。
Webpack 安装
你将使用Webpack打包你的JavaScript源码，并且添加一些高级的特性去构建你的项目用于进一步的构建步骤中。此外，你将使用Webpack Dev Server在本地开发环境中为你的项目提供服务，达到本地服务器开发的目的。最后但并非重要的是，你可以使用Webpack CLI。让我们使用npm来为你的项目安装这三个依赖库（node packages）吧。在你项目的根目录下，输入如下命令，将所有库安装为开发依赖项。
npm install --save-dev webpack webpack-dev-server webpack-cli
注意：开发依赖项不会绑定到生产环境中。（开发依赖项，指明--save-dev）这样，你可以使生产代码的包保持轻量级。例如，如果你希望测试源码，可以在本地开发环境下测试，并且所有测试库安装为开发依赖项，但是这些库并不会包含在实际的生产应用程式中。只有用于运行源代码的依赖项才需要作为生产就绪的依赖项。安装生产依赖项的时候不使用--save-dev标志
作为一个副作用，你应该会发现一个node_modules/文件夹里面包含所有第三方依赖。通常你不需要关心它们。所有的依赖都会在package.json里面列出来，可以看到依赖以及它们的版本号。现在，你的文件夹结构如下：
- dist/
-- index.html
- src/
-- index.js
- node_modules/
- package.json
在你的package.json文件中，将start脚本更改为使用Webpack Dev Server启动的脚本：
{
...
"scripts": {
"start": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
...
}
你可以再次在命令行上运行npm start脚本，然而，这次使用Webpack作为本地服务器以开发模式服务你的文件。导航到dist/index.html文件去看看浏览器的输出。你可能在development tools里面看到你的浏览器找不到bundle.js。这是因为你没有告诉Webpack为我们生产它。接下来，让我们看看如何使用Webpack将源码文件从src/文件夹打包到dist/下。因此，将如下内容添加到package.json的npm start脚本中。
{
...
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
...
}
这个脚本定义了你希望使用Webpack Dev Server和名为webpack.config.js的配置文件。让我们在项目的根目录创建所需的webpack.config.js：
touch webpack.config.js
现在你的目录结构看起来应该是这样的：
- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js
为新创建的wepack.config.js文件配置如下的配置：
module.exports = {
// 1
entry: './src/index.js',
// 2
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
// 3
devServer: {
contentBase: './dist'
}
};
这个Webpack配置文件给出了下列指令：
- (1) 使用
src/index.js文件作为入口点来打包它。如果src/index.js文件中有导入其他的JavaScript文件，也要打包他们。 - (2) 打包的源码文件将在
/dist文件夹下生成一个bundle.js文件。 - (3)
/dist目录将用于服务应用程序给浏览器
完成上述所有事情后，你应该再次启动Webpack Dev Server服务器。在这之前，确保你的dist/index.html已经包含了之前生成的bundle.js文件：
<!DOCTYPE html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
</div>
<script src="./bundle.js"></script>
</body>
</html>
使用npm start启动应用程序后，在浏览器中打开应用程序。注意:浏览器的URL在命令行上也应该是可见的。在浏览器中打开应用程序后，应该能够看到dist/index.html文件的输出和src/index.js文件的日志记录。如果从src/index.js文件导入更多的JavaScript源代码文件，它们也将被Webpack绑定到bundle.js中。
网友评论