乐趣区

关于javascript:关于使用Webpack40搭建的vue-多页面项目的那些事

jiezi

开始前就先弄点筹备工作

  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/

退出移动版