关于使用Webpack4.0搭建的vue 多页面项目的那些事

开始前就先弄点准备工作

1. 安装最新的 Node.js 环境；（官网地址：https://nodejs.org/zh-cn/）
2. 安装npm（这肯定是要的啦）
3. npm install webpack -g（安装webpack 这也是屁话）
4. 进入项目目录，输入命令：npm init，生成package.json文件
5. 输入命令：npm install webpack --save-dev为项目添加webpack依赖
6. 重头戏来了 --- 新建 webpack.config.js；（用于配置 webpack 的运行方式）
7. 现在我们 webpackDemo 文件夹内的结构应该是这样的：

（。。。。这里省略xxx步骤（安装vue依赖啊什么的）。。如果有兴趣的话，请留言一下，我可以把搭建的流程分成几个章节一点点的和大家分享）
准备工作完毕
还是先说说 多页面需要配置的东西把
首先 我们在webpack中entry这个配置需要了解了解
单个入口（简写）语法

const config = {
  entry: './path/to/my/entry/file.js'
}

那多个页面呢？官网上是这么给我们展示的

多页面应用程序
webpack.config.js

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

那我们就有思路了
利用 fs 这个东西去遍历指定路径下的文件不就得了

**
 * 通过约定，降低编码复杂度
 * 每新增一个入口，即在src/pages目录下新增一个文件夹，以页面名称命名，内置一个index.js作为入口文件
 * 通过node的文件api扫描pages目录
 * 这样可以得到一个形如{page1: "入口文件地址", page2: "入口文件地址", ...}的对象
 */
const getEntries = () => {
  let result = fs.readdirSync(pagesDirPath);
  let entry = {};
  result.forEach(item => {
      entry[item] = path.resolve(__dirname, `./src/pages/${item}/main.js`);
  });
  return entry;
}

献上我的文件格式

然后还需要配置 entry的内容

module.exports = {
  devtool: "source-map",
  mode: 'development',   //  webpack4.x版本中需要加入这个属性
  /* webpack 入口起点*/
  // 入口,起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。 
  // 每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。
  // 一般指向项目中,src目录下的main.js文件
  entry: getEntries(),
  }

献上我的git项目地址，记得切换分支哟 feature-eslint/