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循环中进行拦截
    })

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

  • 相关阅读:
    二进制回复操作
    日志和备份介绍
    mraiadb查
    mraiadb增三删改
    mardb基本操作
    redis搭建主从和多主
    ldd 查看符号找不到
    一个声明指定了多个类型
    word中为选定文本加边框和底纹
    ue配置lua语法高亮
  • 原文地址:https://www.cnblogs.com/mengff/p/12976265.html
Copyright © 2011-2022 走看看