3.12.2　配置一个完整项目的webpack

新建项目文件夹webpack_test，这里需要4个相关的文件，分别作为JavaScript的入口文件app.js，存放需要调用方法的bar.js文件，引入导出生成的JavaScript文件index.html，用于webpack打包文件配置的webpack.config.js文件。

在开始之前，请确保安装了Node.js的最新版本。使用Node.js最新的长期支持版本（Long Term Support，LTS）是理想的起步；使用旧版本可能会遇到各种问题，因为可能会缺少webpack功能，或者缺少相关package包。

在本地安装webpack，本书使用的webpack版本为webpack 3.6.0。

要安装最新版本或特定版本，请运行以下命令之一。如果读者是初学者，建议使用第2条命令安装和笔者相同的版本，以方便学习。

对于大多数项目，webpack官方建议本地安装，这样可以使开发者在引入破坏式变更（breaking change）的依赖时，更容易分别升级项目。

通常，webpack通过运行一个或多个npm scripts，会在本地node_modules目录中查找安装的webpack：

使用npm安装时也可以采用全局安装方式，使webpack在全局环境下可用。但是不推荐全局安装webpack，因为会将我们项目中的webpack锁定到指定版本，并且在使用不同的webpack版本的项目中，可能会导致构建失败。

在项目中新建文件夹app，作为JavaScript的代码存放处，新建public文件夹作为index.html的文件夹。

编写app文件夹中的两个JavaScript文件，为了测试JavaScript的import方式，这里需要编写两个JavaScript文件，分别是app.js和bar.jso。

首先编写bar.js文件，让其在页面上弹出一个提示框，代码如下：

在app.js文件中需要引入上述JS文件，其代码如下：

在public文件夹中新建一个index.html文件，需要在该文件夹中引入webpack生成的bundle.js文件（后期生成，非自己创建），其代码如下：

接下来需要编辑webpack的配置文件即webpack.config.js文件，代码如下：