webpack 示例_Webpack入门[包含示例项目]

最新推荐文章于 2024-09-15 22:31:42 发布

cune1359

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量232

点赞数

文章标签： python java vue javascript 编程语言 ViewUI

Webpack是一个模块捆绑器 ，可帮助构建复杂JavaScript应用程序。自从React社区选择它作为其主要构建工具以来，它已受到了广泛的关注。 Webpack 既不是包管理器也不是任务运行器，因为它使用不同的（更高级的）方法，但它的目标也是建立一个动态的构建过程 。

Webpack与香草JavaScript一起使用。您可以使用它将应用程序的静态资产（例如图像，字体，样式表，脚本）捆绑到一个文件中， 同时照顾所有依赖项 。

您将不需要Webpack来创建一个简单的应用程序或网站，例如，一个只有一个JavaScript和一个CSS文件以及几个图像的应用程序或网站，但是对于具有多个资产和依赖项的更复杂的应用程序来说，它可以节省生命。

Webpack vs.任务运行器vs.Browserify

那么， 与其他构建工具（例如Grunt ， Gulp或Browserify） 相比， Webpack如何堆叠？

Grunt和Gulp是任务赛跑者。在他们的配置文件中，您指定任务 ，然后任务运行器执行它们。 任务运行器的工作流程基本上如下所示：

但是，Webpack是一个模块捆绑器 ，可以分析整个项目， 设置依赖关系树 ，并创建一个捆绑JavaScript文件 ，供浏览器使用。

Browserify比任务运行者更接近Webpack，因为它还创建了一个依赖图，但它仅对JavaScript模块如此 。 Webpack更进一步，它不仅捆绑了源代码，而且还捆绑了其他资产，例如图像，样式表，字体等。

如果您想进一步了解Webpack与其他构建工具的比较 ，建议您阅读两篇文章：

Andrew Ray的Webpack：何时使用以及为什么在他自己的博客上
FreeCodeCamp上Cory House的Browserify vs Webpack（带有精美插图）

上面的两个插图来自Pro React手册的Webpack材料，这是另一个值得一看的资源。

Webpack的四个核心概念

Webpack有四个主要的配置选项，称为“核心概念” ，您需要在开发过程中进行定义：

Entry –依赖关系图的起点（一个或多个JavaScript文件）。
输出 –您要将输出捆绑到的文件（一个JavaScript文件）。
装载机 -对他们变成资产转换的WebPack模块 ，使他们能够被添加到依赖关系图 。例如， css-loader用于导入CSS文件。
插件 – 在捆绑软件上执行的自定义操作和功能。例如， i18n-webpack-plugin将本地化嵌入到包中。

加载程序会在编译之前按文件进行工作。 在编译过程结束时，将对捆绑的代码执行插件。

安装Webpack

要安装Webpack ，请打开命令行，导航到您的项目文件夹，然后运行以下命令：

npm init

如果您不想自己进行配置，则可以使用以下命令使npm 用默认值填充package.json文件 ：

npm init -y

接下来，安装Webpack：

npm install webpack --save-dev

如果使用了默认值，这就是package.json文件现在的样子（属性可以以不同的顺序排列）：

{
  "name": "_tests",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

创建配置文件

您需要在项目的根文件夹中创建一个webpack.config.js文件。该配置文件起着核心作用，因为您将在其中定义四个核心概念 （入口点，输出，加载程序，插件）。

webpack.config.js文件包含一个配置对象 ，您需要指定其属性。在本文中，我们将指定与四个核心概念 （ entry ， output ， module和plugin ） 相对应的四个属性，但是config对象还具有其他属性。

1.创建入口点

您可以具有一个或多个入口点 。您需要在entry属性中定义它们。

将以下代码片段插入webpack.config.js文件。它指定一个入口点 ：

module.exports = {
  entry: "./src/script.js"
};

要指定多个入口点，可以使用数组或对象语法 。

在您的项目文件夹中， 创建一个新的src文件夹，并在其中 创建一个script.js文件 。这将是您的切入点 。出于测试目的，只需在其中放置一个字符串 。我使用了以下代码（但是，您也可以使用更有趣的代码）：

const greeting = "Hi. I'm a Webpack starter project.";
document.write(greeting);

2.定义输出

您只能有一个输出文件 。 Webpack将所有资产捆绑到该文件中。您需要通过以下方式配置output属性：

const path = require("path");

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  }
};

filename属性定义捆绑文件的名称，而path属性指定目录的名称 。上面的示例将创建/dist/bundle.js文件。

尽管不是强制性的，但在定义path属性时最好使用path.resolve()方法 ，因为它可以确保准确的模块分辨率 （输出的绝对路径是根据不同环境中的不同规则创建的，模块分辨率可以解决此问题）差异）。如果使用path.resolve ，则需要在webpack.config.js文件的顶部需要 path Node模块 。

3.添加装载机

要添加装载程序 ，您需要定义module属性。在下面，我们添加了babel-loader ，它使您可以安全地在JS文件中使用ECMAScript 6功能 ：

const path = require("path");

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: { presets: ["env"] }
        }
      }
    ]
  }
};

配置可能看起来很困难，但是只是从Babel loader的文档中复制粘贴了。大多数加载程序都随附有自述文件或某种文档，因此您（几乎）始终可以知道如何正确配置它们。并且，Webpack文档中还有一个页面，说明如何配置module.rules 。

您可以根据需要添加任意数量的加载程序，这是完整列表。请注意，您还需要使用npm安装每个加载器，以使其正常工作。对于Babel加载程序，您需要使用npm安装必要的Node软件包：

npm install --save-dev babel-loader babel-core babel-preset-env webpack

如果查看一下package.json文件，您会看到npm 在devDependencies属性中添加了三个与Babel相关的包 ，这些包将处理ES6编译。

4.添加插件

要添加插件 ，您需要指定plugins属性。另外，您还必须一对一地要求插件 ，因为它们是外部模块。

在我们的示例中，我们添加了两个Webpack插件： HTML Webpack插件和Preload Webpack插件 。 Webpack有一个很好的插件生态系统 ，您可以在此处浏览完整列表。

要将插件要求为Node模块，请创建两个新的常量 ： HtmlWebpackPlugin和PreloadWebpackPlugin并使用require()函数。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PreloadWebpackPlugin = require("preload-webpack-plugin");

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: { presets: ["env"] }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new PreloadWebpackPlugin()
  ]
};

就像加载程序一样，您还必须使用npm安装Webpack插件 。要在示例中安装两个插件，请在命令行中运行以下两个命令：

npm install html-webpack-plugin --save-dev
npm install --save-dev preload-webpack-plugin

如果现在检查package.json文件，您将看到npm 将两个插件添加到devDependencies属性中 。

运行Webpack

要创建依赖关系树并输出包 ，请在命令行中运行以下命令：

webpack

Webpack构建项目通常需要一到两分钟 。完成后，您将在CLI中看到类似的消息：

如果一切顺利，Webpack 将在项目的根目录中创建一个dist文件夹 ， 并将其中的两个捆绑文件（ bundle.js和index.html ）放入其中 。

Github回购

如果您想签出，下载或创建整个项目，请查看我们的Github存储库。

翻译自: https://www.hongkiat.com/blog/webpack-introduction/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫