zoukankan      html  css  js  c++  java
  • webpack单独启动目录方法

    项目中的文件多了,开发模式实时编译,会变得很慢,影响开发效率。很多模块是不相干的,没必要同时启动,这个时候就需要

    只启动项目的某个文件夹。

    例如:

    src
    --pages
      --pageA
        --index.js
        --index.ejs
      --pageB
        --index.js
        --index.ejs
      --pageC
        --index.js
        --index.ejs

    webpack打包页面的关键点,在于入口 entry 和 html-webpack-plugin

    entry决定了页面的数量

    html-webpack-plugin决定了要生成多少个页面

    实际上,html-webpack-plugin一般要基于entries数组来生成,这样就需要处理入口文件就行了。

    可以使用 glob 来读取入口文件,例如 glob('./src/pages/*/index.js'),这样得到的数组,就可以获取到所有的入口。

    let entries = [];
    glob('./src/pages/*/index.js').forEach(path => {
        //从文件路径中得到文件名称
        const chunk = path.split("./src/pages/")[1].split(".js")[0];
        entries.push({
            path: path,
            chunk: chunk
        })
    })

    可以通过 glob('./src/pages/*/index.ejs')来读取模板,这里直接使用entries数组

    entries.forEach(item => {
      let {path,chunk} = item;
      const conf = {
        filename: chunk + "/index.html";,
        template: path,
        inject: false,
        ...
      };
      plugins.push(new htmlWebpackPlugin(conf));
    });

    这样可以得到HTMLWebpackPlugin的列表。

    如果要只启动一个目录,只有保证,entries只添加该目录下的index.js文件就行了。

    例如:npm dev pageA, 只启动pageA这一个目录

    可以直接把entries写成

    entries = {
        path: '',
        chunk: 'pageA'
    }

    或者

    把 glob('./src/pages/*/index.js') 改为 glob('./src/pages/pageA/index.js')

    或者

    glob('./src/pages/*/index.js').forEach(path => {
        //for循环中进行拦截
    })

    这样就能快速启动单个目录。

  • 相关阅读:
    hdu--1026--Ignatius and the Princess I(bfs搜索+dfs(打印路径))
    hdu--1798--Doing Homework again(贪心)
    开启事务的两种方法
    事务的隔离级别,乐观锁,悲观锁
    树的结构,无限极关联
    微信小程序的加密解密以及小程序的支付
    微信小程序之登录连接django,以及用户的信息授权认证
    微信小程序三
    微信小程序二
    vue-cookies缓存
  • 原文地址:https://www.cnblogs.com/mengff/p/12976265.html
Copyright © 2011-2022 走看看