如何使用webpack打包多页面

　　介绍

这篇文章给大家介绍如何使用webpack打包多页面,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强>项目解决的问题

<李>

温泉好复杂,我还是喜欢传统的多页应用怎么破?又或是,我司项目需要后端渲染,页面模板怎么出?

<李>

每个页面相同的UI布局好难维护,UI稍微改一点就要到每个页面去改,好麻烦还容易漏,怎么破?

<李>

能不能整合进ESLint来检查语法?

<李>

能不能整合postcss来加强浏览器兼容性?

<李>

我可以使用在webpack中使用jquery吗?

<李>

我可以使用在webpack中使用打印稿吗?

<强> src目录对应的dist目录

如何使用webpack打包多页面

当我们使用webpack打包多页面,我们希望src目录对应打包后dist目录是如上图这样的,开发根据页面模块的思路搭建开发架构,然后经过webpack打包,生成传统页面的构架。

/* * 　　,*创建打包路径 　　,*/const  createFiles =,()函数,{ 　　,const  usePug =,要求(& # 39;. ./配置# 39;).usePug; 　　,const  useTypeScript =,要求(& # 39;. ./配置# 39;).useTypeScript; 　　,const  path =,要求(& # 39;path & # 39;); 　　,const  glob =,要求(& # 39;一团# 39;); 　　,const  result =, []; 　　,const  type =, usePug  ?, & # 39;哈巴狗# 39;,:,& # 39;html # 39;; 　　,const  scriptType =, useTypeScript  ?, & # 39; ts # 39;,:, & # 39; js # 39;; 　　,const  files =, glob.sync (path.join (__dirname,“. ./src/视图/* */*。${类型}')); 　　,for  (file  of 文件),{ 　　result.push({才能 　　,,,的名字:usePug  ?, file.match (/\ w {0} (?=\ .pug)/) [0],:, file.match (/\ w {0} (?=\ . html)/) [0], 　　,,,templatePath:文件, 　　,,jsPath: file.replace(类型,scriptType), 　　,,,stylePath: file.replace(类型,& # 39;针# 39;) 　　,,}); 　　,} 　　,return 结果; 　　};

利用这个方法,我们可以获得需要打包的文件路径(方法中获取文件路径的模块也可使用fs模块),根据获得打包的文件路径,我们可以使用<代码> html-webpack-plugin>

由于每一个html-webpack-plugin的对象实例都只针对/生成一个页面,因此,我们做多页应用的话,就要配置多个html-webpack-plugin的对象实例:

const  plugins =,()函数,{=,const  files 它仅仅(); 　　,const  HtmlWebpackPlugin =,要求(& # 39;html-webpack-plugin& # 39;); 　　,const  path =,要求(& # 39;path & # 39;); 　　,const  ExtractTextPlugin =,要求(& # 39;extract-text-webpack-plugin& # 39;); 　　 　　,let  htmlPlugins =, []; 　　,let  Entries =, {}; 　　,files.map (file =祝辞,{ 　　htmlPlugins.push才能( 　　,,new  HtmlWebpackPlugin ({ 　　,,,文件名:,“$ {file.name} . html”, 　　,,,模板:,file.templatePath, 　　,,,的块:,(file.name) 　　,,}) 　　,,); 　　条目才能[file.name],=, file.jsPath; 　　,}); 　　 　　,return  { 　　插件才能:, 　　,,…htmlPlugins, 　　,,new  ExtractTextPlugin ({ 　　,,,文件名:,getPath =祝辞,{ 　　,,,,return  getPath (& # 39; css/[名字]. css # 39;); 　　,,,} 　　,,}) 　　,,, 　　,条目 　　,}; 　　};

由于我使用了ExtractTextPlugin,因此这些CSS代码最终都会生成到所属块的目录里成为一个CSS文件。

<强>模版引擎

每个页面相同的UI布局好难维护,UI稍微改一点就要到每个页面去改,好麻烦还容易漏,怎么破?

考虑到这个问题,项目引进并使用了<代码>哈巴狗模版引擎。

现在,我们可以利用<代码>哈巴狗>

演示。哈巴狗p

这是一个共用组件

然后,当你需要使用这个公用组件时可以引入进来:

include  & # 39; demo.pug& # 39;

除此之外,你还可以使用一切哈巴狗特供的特性。

webpack中配置哈巴狗也很简单,先安装:

npm 小姐:——save-dev  pug  pug-html-loader

然后将所有html后缀的改为。哈巴狗后缀,并且使用哈巴狗语法。

然后在规则中再增加一条配置

{ 　　,,测试:/\ .pug/美元, 　　,,使用:& # 39;pug-html-loader& # 39; 　　}

如何使用webpack打包多页面