什么是 Webpack？
Webpack 是一个现代的 JavaScript 应用程序的静态模块打包器，它可以将代码中的所有依赖项（如样式表、图片、HTML 等）转化为模块，并将其打包成静态资源。
安装 Webpack3
要安装 Webpack3，我们需要先安装 Node.js 和 NPM。如果您已经安装了这些工具，请继续按照以下步骤：
- 打开命令行工具，进入到您的项目目录。
- 运行
npm init命令来创建一个新的package.json文件。 - 运行以下命令安装 Webpack3：
npm install webpack@3 --save-dev
配置 Webpack3
要配置 Webpack3，我们需要创建一个名为 webpack.config.js 的文件，该文件应该位于项目根目录下。以下是一个简单的配置示例，假设您的项目有一个名为 app.js 的主要 JavaScript 文件：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------- ------- - ----- ----------------------- -------- --------- ----------- - --展开代码
在上面的示例中，我们指定了我们的 entry 文件是 app.js，并将打包后的文件输出到 dist/bundle.js。
加载器和插件
除了基本的配置之外，Webpack3 还提供了许多加载器和插件来扩展其功能。以下是一些常用的加载器和插件：
加载器
- Babel：用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
- CSS-loader：用于加载和解析 CSS 文件。
- Style-loader：将 CSS 插入到 DOM 中。
- File-loader：用于加载图像和字体文件。
插件
- UglifyJS：用于压缩 JavaScript 代码。
- HtmlWebpackPlugin：用于生成 HTML 文件，并自动将打包后的文件添加到 HTML 文件中。
- ExtractTextPlugin：用于将 CSS 提取到单独的文件中。
要使用这些加载器和插件，我们需要在 webpack.config.js 中进行配置。以下是一个例子：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----------------- - ------------------------------- ----- ----------------- - --------------------------------------- -------------- - - ------ ----------- ------- - ----- ----------------------- -------- --------- ----------- -- ------- - ------ - - ----- -------- -------- --------------- ------- -------------- -- - ----- --------- ---- --------------------------- --------- --------------- ---- ------------ -- -- - ----- ----------------------- ---- --------------- - - -- -------- - --- ---------------------------- ----------------- --- ------------------------------- - --展开代码
在上面的例子中，我们使用了 Babel 加载器来转换 ES6+ 代码，使用 CSS-loader 和 Style-loader 来加载和解析 CSS 文件，并将其插入到 DOM 中。我们还使用了 File-loader 来加载图像和字体文件。最后，我们使用了 HtmlWebpackPlugin 插件来生成 HTML 文件，并自动将打包后的文件添加到 HTML 文件中。我们还使用了 ExtractTextPlugin 插件将 CSS 提取到单独的文件中。
运行 Webpack3
要运行 Webpack3，请使用以下命令：
webpack --config webpack.config.js
如果您希望在开发模式下运行 Webpack3，请使用以下命令：
webpack --config webpack.config.js --mode development
这将启用开发者工具，并在每次更改代码时自动重新编译。
总结
Webpack3 是一个非常强大的静态模块
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56531
