Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它会分析应用程序的结构,构建一个依赖关系图,并生成一个或多个 bundle 文件。
安装 Webpack
要开始使用 Webpack,首先需要安装 Node.js。然后可以使用 npm 来安装 Webpack:
npm install webpack webpack-cli --save-dev
安装完成后,可以通过以下命令来验证 Webpack 是否安装成功:
npx webpack --version
创建一个简单的 Webpack 应用
接下来,我们将创建一个简单的 Webpack 应用程序。首先,在项目根目录下创建一个 src 文件夹,并在其中创建一个 index.js 文件:
// index.js
console.log("Hello, Webpack!");然后,在项目根目录下创建一个 webpack.config.js 文件,用于配置 Webpack:
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
-
--在上面的配置中,我们指定了入口文件为 src/index.js,输出文件为 dist/bundle.js。
最后,在 package.json 文件中添加一个 build 脚本:
"scripts": {
"build": "webpack"
}现在,可以运行以下命令来构建应用程序:
npm run build
Webpack 将会根据配置文件打包应用程序,并生成一个 bundle.js 文件。
这样,我们就完成了一个简单的 Webpack 应用程序的创建和构建过程。在接下来的章节中,我们将继续探讨更多 Webpack 的功能和用法。