关于javascript:关于使用Webpack40搭建的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/