起步
webpack 用于编译 JavaScript 模块。一旦完成 安装,你就可以通过 webpack CLI 或 API 与其配合交互。如果你还不熟悉 webpack,请阅读 核心概念 和 对比,了解为什么要使用 webpack,而不是社区中的其他工具。
运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。
基本安装
首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli
(此工具用于在命令行中运行 webpack):
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在整个指南中,我们将使用 diff
块,来展示对目录、文件和代码所做的修改。例如:
this is a new line you shall copy into your code
and this is a line to be removed from your code
and this is a line not to touch.
现在,我们将创建以下目录结构、文件和内容:
project
webpack-demo
|- package.json
|- package-lock.json
|- index.html
|- /src
|- index.js
src/index.js
function component() {
const element = document.createElement('div');
// lodash(目前通过一个 script 引入)对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<head>
"utf-8" />
起步