如何使用 Webpack 设置 JavaScript 项目

您是否希望不再手动将所有脚本作为标签添加到 html 文件中？

好了，你的愿望已经结束了！让我来带你体验 Webpack 的乐趣吧！

Webpack 开箱即用，允许你在 html 文件中只使用一个 script 标签。它实现这一点的方法是创建一个依赖关系图，然后将所有代码打包在一起。我们将要创建的示例 ToDo 应用的依赖关系图如下所示。

Webpack 会抓取您的代码，找到所有导入和导出语句，然后将您实际使用的所有代码汇总到一起，并将它们捆绑到一个文件中，然后将其包含在您的 html 文件中。

在我们开始任何操作之前，你需要做一些基础工作。创建一个新文件夹，并创建一个类似以下示例的文件目录。你需要将 build 和 src 文件夹设置为包含图中所示文件的文件。

现在在根目录中，让我们设置一些东西。首先运行npm init -y。
这将创建一个包含所有默认设置的 package.json 文件。

现在我们需要安装一些模块。--save-dev 表示它们将被保存为开发依赖项，不会过度扩展最终构建。所以运行npm install --save-dev webpack webpack-cli。

那么，让我们开始创建一个显示简单待办事项列表的应用吧。首先，我们来设置一下 index.html。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To Do List Webpack Demo</title>
</head>

<body>
  <div id="app"></div>

  <script src="app.js"></script>
</body>

</html>

在我们实际添加任何 JavaScript 代码之前，让我们先看看我们的应用要做什么。以下是它的所有功能。

function toDoList (list) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = "To Do List";
  list.forEach(item => {
    newElement.append(toDoListEntry(item));
  });
  return newElement;
}

function toDoListEntry (item) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = item;
  return newElement;
}

const toDos = ['Go to store', 'Clean house', 'Feed dogs'];

document.getElementById('app').appendChild(toDoList(toDos));

很简单，对吧？

我们可以把所有这些放在一个文件中，但假设情况更复杂，我们想把这两个函数拆分成各自的文件。所以，我们在文件树中添加几个文件。现在应该像这样。

现在让我们开始用导入和导出功能把它们连接起来！我们先来看看 toDoListEntry.js。

function toDoListEntry (item) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = item;
  return newElement;
}

export default toDoListEntry;

我们只需在底部添加一个导出语句来导出我们希望其他文件能够看到的函数，而默认操作将使这一过程更快完成，因为我们只想从这个文件中得到一件事。

现在让我们对 toDoList.js 做同样的事情

import toDoListEntry from "./toDoListEntry.js";

function toDoList (list) {
  const newElement = document.createElement('ul');
  newElement.innerHTML = "To Do List";
  list.forEach(item => {
    newElement.append(toDoListEntry(item));
  });
  return newElement;
}

export default toDoList;

我们在文件顶部添加了一个 import 语句，用于访问 toDoListEntry.js 的默认导出。然后，我们就可以像之前一样在 forEach 循环中调用它了。

然后我们只需导出到DoList。

现在只需设置一个文件。我们来看看 index.js。

import toDoList from "./toDoList.js";

const toDos = ['Go to store', 'Clean house', 'Feed dogs'];

document.getElementById('app').appendChild(toDoList(toDos));

我们所做的就是从 toDoList.js 导入 toDoList 并像以前一样调用它。

很快，我们需要创建一个 webpack.config.js 文件。然后像这样启动它

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: __dirname + 'build',
    publicPath: '/'
}

入口点是它首先要查看以构建其依赖关系图的文件。

输出是编译后代码的存放位置。filename 是文件的名称，path 是文件所在的文件夹。

现在，运行npx webpack --config ./webpack.config.js它，它会自动编译代码，并在 build 文件夹中生成一个 app.js 文件。但是，每次修改代码后都要手动输入这些代码，很快就会觉得很麻烦。所以，让我们在 package.json 文件中添加一个新脚本来帮我们处理这个问题。

"start": "webpack --config ./webpack.config.js --watch"

--config 只是告诉它在哪里查找你的配置文件，而 --watch 只是告诉它如果你更改了任何文件就持续更新。现在你只需运行 npm start，你的 app.js 文件就会自动更新！

让我们对 webpack.config.js 文件进行最后一次质量更新。我们将把它设置为开发模式，这样我们就可以读取任何错误并调试代码。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.js',
    path: __dirname + '/build',
  },
  devtool: 'eval-source-map',
  mode: 'development'
}

将其置于开发模式可以防止代码被最小化，并将 devtool 设置为“eval-source-map”可以跟踪我们可能遇到的任何错误，以便于查找。

所以正如你所见，即使这个项目很小，可能不需要 webpack，它仍然展示了这个工具的实用性。随着你的项目越来越大，webpack 将帮助你保持代码的条理性和流畅性！

鏂囩珷鏉ユ簮锛�https://dev.to/dtroyano86/how-to-setup-a-javascript-project-with-webpack-259a