可以说现在但凡开发Single page application，webpack是一个不可或缺的工具。
WebPack可以看做是一个模块加工器，如上图所示。它做的事情是，接受一些输入，经过加工产生一些输出。
输入是我们web前端项目的模块文件，通常情况下这些文件都不能直接被浏览器的JavaScript执行引擎所执行。
输出是经过webpack加工后的能被浏览器使用的javascript和静态资源文件。比如ES6的js转成ES5的js，CSS预处理器文件转成CSS文件等等。
我们来动手做一个具体的例子。这个例子只花费10分钟时间，就能让我们熟悉webpack的基本用法。
1. 新建一个文件夹，首先用npm init命令创建一个package.json:
在下面使用命令行npm install --save-dev webpack，安装webpack并保存到项目的package.json的devDependencies下面。
花了一分钟才执行完毕。
执行完毕后，检查package.json, 发现webpack出现在devDependencies区域里。
此时项目文件夹层次结构如下图：
2. 新建一个index.html文件，输入以下内容：
<html>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</html>
从源代码看出，这个html引用了一个webpack打包之后生成的输出文件。
既然是模块化开发，我们就新建一个模块，实现文件放在print.js里：
function print(content){
window.document.getElementById("app").innerText = "Hello," + content;
}
module.exports = print;
这个模块就实现了一个print函数，把传入的字符串显示在index.html的id为app的div标签里。
有了module后，我们还需要执行这个module。为此，新建一个main.js文件，输入下列内容：
const print = require("./print.js");
print("Jerry");
最后，我们得生成index.html使用到的bundle.js文件。为此，我们要给webpack定义一个任务，通过新建文件webpack.config.js完成。
entry字段定义了webpack的输入：main.js, 输出则放在当前目录dist下面的bundle.js里。
const path = require("path");
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
},
mode: 'development' // 设置mode
};
至此，webpack_demo文件夹下的资料看起来是这样的：
执行命令行webpack：
执行完webpack后，打开index.html, 看到了我们期望中的Hello Jerry:
至此，一个最简单的webpack例子就跑通了。
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
相关推荐
在“Webpack 从零入门到工程化实战”中，你将学习到以下关键知识点： 1. **Webpack 基本概念**： - **Entry（入口）**：Webpack 构建的起点，定义了项目中的主文件。 - **Output（输出）**：配置构建后的文件路径...
在这个"Webpack 从零入门到工程化实战"专栏源码中，你将深入学习Webpack 的基本概念、配置、插件和加载器的使用，以及如何将其应用到实际项目中实现工程化。 一、Webpack 基础 Webpack 将应用程序视为由多个模块...
Webpack：Webpack配置入门.docx
这个简单的入门教程将引导你了解Webpack的基本概念和配置，让你快速上手。 首先，我们从核心概念开始： 1. **入口(Entry)**：Webpack 开始构建的地方，通常在`webpack.config.js`中定义。在这个例子中，可能`main....
通过深入学习和实践本教程提供的"Webpack 3 零基础入门教程"，你将能够熟练地使用Webpack进行项目构建，为现代前端开发打下坚实的基础。无论你是新手还是经验丰富的开发者，这个教程都将帮助你更好地理解和利用...
《vue(vue-cli+vue-router)+babel+webpack项目搭建入门》系列教程的实战教程示例项目代码。
Webpack入门视频教程.txt 前端必备技能，助你快速掌握
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
#### 四、Webpack入门步骤 1. **安装Webpack**： - 使用 npm 或 yarn 安装 webpack 和 webpack-cli。 - 初始化 node.js 项目，使用 `npm init` 创建 package.json 文件。 2. **配置Webpack**： - 创建 `webpack...
### Webpack 4.x 基础入门 #### 一、Webpack 4.x 简介与重要性 Webpack 是一款流行的 JavaScript 模块打包工具，它可以将多种资源（如 JavaScript 文件、图片、字体等）合并成一个或多个包(bundle)，以供浏览器...
本压缩包提供的内容是针对初学者的Webpack入门配置，通过简单步骤即可创建一个基础的Webpack打包项目。 1. **Webpack 基础概念** Webpack 是一个静态模块打包器，它会将JavaScript、CSS、图片等所有应用到项目中的...
这个“webpack入门demo代码”很可能是为了帮助初学者理解Webpack的基本用法和工作流程。 在Webpack中，核心概念包括： 1. **入口（Entry）**：这是Webpack开始构建的地方，它定义了哪些文件是应用程序的起点。在...
React是Facebook推出的一款用于构建用户界面的...综上所述，React结合Webpack的入门示例涵盖了React组件化开发以及Webpack的模块管理和打包功能。通过深入理解和实践，开发者能够创建高效、模块化的现代Web应用。
在本入门教程中，我们将深入理解Webpack的工作原理，并学习如何配置和使用它。 ### 1. 模块化 Webpack 将你的项目视为一个模块化的系统，允许你使用 `import` 和 `export` 语句来管理依赖关系。这使得代码更易于...
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源...
【webpack入门必知必会】 Webpack 是一个现代前端开发中不可或缺的模块打包工具，它能够将 JavaScript、CSS、图片等资源文件打包成优化过的静态资源，以提高项目的加载速度和组织结构。它不仅是一个简单的打包工具...
Webpack 4 简单入门实例 Webpack 是一个流行的模块打包工具，用于处理现代JavaScript应用程序的构建过程。它能够将各种资源（如JavaScript、CSS、图片等）转换、打包，并生成适合部署到生产环境的静态资源。Webpack...