注：以下教程都是在windows环境下实现的，使用其他操作系统的同学在实践过程中可能会有一些差异。1.准备安装最新的Node.js环境；（官网地址：https://nodejs.org/zh-cn/）安装cnpm淘宝npm镜像；（在控制台执行命令：npminstall-gcnpm--registry=https://registry.npm.taobao.org）2.构建webpack基础文件目录新建一个文件夹，命名为webpackDemo；将命令行切换到webpackDemo的文件目录，执行npminit-y生成默认的package.json配置文件；（package.json文件用于描述项目的一些基本信息，以及依赖配置，具体字段的含义这里不做解释）使用cnpm安装webpack（这里使用webpack@3.11.0版本）：cnpmi--save-devwebpack@3;创建新的webpack.config.js；（用于配置webpack的运行方式）现在我们的webpackDemo文件夹中的结构应该是这样的：3、配置webpack.config.js现在webpack的基础目录已经搭建好了现在，如果在目录下执行命令webpackwebpackDemo，会提示如下错误：这是因为在执行webpack命令的过程中，会从当前路径读取webpack.config.js的配置信息。现在我们的webpack.config。js文件为空，没有配置项output.filename，所以会提示需要配置项'output.filename'。下面我们来配置最简单的webpack.config.js：webpack.config.jswebpack会根据配置信息找到打包入口./index.js并输出文件./test.js。现在我们当前目录下不存在index.js，所以先新建一个index.js文件：index.js我们的入口文件做了很简单的事情，就是定义了一个test变量。现在我们的文件目录结构是这样的：接下来我们在webpackDemo目录下执行webpack打包命令看看会发生什么：从输出信息可以看出webpack打包耗时67ms，在当前目录下生成了一个2.49kB测试.js文件。再看一下我们的文件目录结构，多了一个test.js文件：现在来看一下webpack打包生成的test.js文件。可以看到打包后的test.js文件是一个自执行函数：(function(modules){...})([(function(module,exports){vartest=123;})]);我们将index.js文件的内容以函数数组的形式传递给modules参数，在main函数中执行。（webpack生成文件的具体使用说明，后续章节会提到。）以上是最基本的webpack工程结构。下一章我们将配合babel搭建一个可以使用最新ES6语法开发的平台（webpack项目搭建：（二）ES6编译环境搭建）。源码下载地址：https://github.com/xh4722/web...
