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

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

来源：oschina

链接：https://my.oschina.net/u/4305379/blog/4293260

标签

javascript

ejs