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
提供如下内容:
Hello Webpack
Hello Webpack
该文件包含了浏览器中你的站点显示所需的所有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
文件最直接的方法是:
Hello Webpack
Hello Webpack
然而,随着时间的推移,这可能会变成一项重复乏味的工作,因为你必须追踪你的HTML
链接了哪些JavaScript
文件。这就是为什么我们使用Webpack
把src\
文件夹中的所有源码生成为一个JavaScript
包,这个包随后自动放入dist/
文件夹中。然后,它可以使用如下方式作为HTML
文件的入口点:
Hello Webpack
Hello Webpack
因此,我们需要配置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
文件:
Hello Webpack
Hello Webpack
使用npm start
启动应用程序后,在浏览器中打开应用程序。注意:浏览器的URL在命令行上也应该是可见的。在浏览器中打开应用程序后,应该能够看到dist/index.html
文件的输出和src/index.js
文件的日志记录。如果从src/index.js
文件导入更多的JavaScript
源代码文件,它们也将被Webpack
绑定到bundle.js
中。