本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。

在开始前我们需要先理解它的核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

2-1、入口

入口起点(entry point)

这里是一切开始的起点。面对实际的业务来讲的话，可以分为单页面( SPA ) 和多页面。那么今天就针对这2种情况来分别 介绍下 利用 webpack 进行项目架构的需要注意的地方。

2-1-1、单页面入口

2-1-1-1、实现的写法：

webpack.config.js

module.exports = {     entry: './app.js' }

2-1-1-2、同样也可以通过对象语法来解决不同场景的问题：

webpack.config.js

module.exports = {     entry: {         app: './app.js',         vendors: './src/JQ.js'     } }

2-1-2、多页面应用的入口

webpack.config.js

module.exports = {   entry: {     pageOne: './src/pageOne/index.js',     pageTwo: './src/pageTwo/index.js',     pageThree: './src/pageThree/index.js'   } };

但是这里只是人工的去配置了多页面，其实很明显这种做法很不聪明。
所以你需要一个聪明的做法，这里就大致讲一下思路。 通过
（ ' ./src/**/*.js' ） 匹配到 多页面到文件入口路径，然后 通过 glob.sync(globPath)
获取到全部路径，拿到每个页面的 入口文件路径。 最后传值给 webpack 的 entry 对象。

2-2、输出

2-2-1、单页面 输出

webpack.config.js

module.exports = {   output: {     filename: 'bundle.js',     path: '/home/proj/public/assets'   } };

2-2-2、多页面 输出

webpack.config.js

                        
关键字：