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 的功能和用法。