开始前就先弄点筹备工作

  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/