前言

我第一次接触webpack是因为使用Vue，因为Vue的脚手架是用webpack搭建的。起初，我以为webpack是为了打包单个页面而诞生的。后来我就想，这么好的包装方案只用在单页上，是不是浪费资源？如果能在传统的多页上使用webpack，会不会事半功倍？幸运的是，许多优秀的前端开发人员已经编写了许多演示和文章供人们学习。我还写了一个小项目，希望能帮助大家学习webpack。

嗯，其实以上都是废话。接下来，请附上项目地址和干货。不如一起吃。

web pack-多页

项目解决的问题

SPA这么复杂，我还是喜欢传统的多页应用。或者说，我们的项目需要后端渲染，如何获取页面模板？很难在每个页面上保持相同的UI布局。如果稍微改变一下UI，就要在每一页都改变。很麻烦，容易漏。怎么破？你能集成ESLint检查语法吗？可以集成postcss来增强浏览器兼容性吗？我可以在webpack中使用jquery吗？我可以在webpack中使用typescript吗？Src目录对应于dist目录

当我们使用webpack打包多个页面时，我们希望与src目录对应的打包dist目录如上图所示。开发框架按照页面模块的思想构建，然后通过webpack打包生成传统页面的框架。

/* * *创建打包路径*/const创建文件=function(){ const use pug=require('./config ')。使用帕格；const useTypeScript=require('./config ')。useTypeScriptconst path=require(' path ')；const glob=require(' glob ')；const result=[]；const type=use帕格？pug ' : ' htmlconst scriptType=useTypeScript？ts ' : ' jsconst files=glob . sync(path . join(_ _ dirname，`./src/view/* */*。$ { type } `)；for(文件的文件){ result . push({ name :use帕格？file . match(/ w { 0 }，}(？=.pug)/)[0] : file.match(/w{0，}(？=.html)/)[0]，templatePath:文件，jsPath:文件. replace(type，scriptType)，stylePath:文件. replace(type，‘stylus’)})；}返回结果；};通过这个方法，我们可以获得要打包的文件路径(方法中获取文件路径的模块也可以使用fs模块)。根据得到的打包文件路径，我们可以使用html-webpack-plugin实现多页打包。

html-webpack-plugin的每个对象实例只针对/生成一个页面，所以如果我们做多页应用，需要配置html-webpack-plugin的多个对象实例：

const plugins=function(){ const files=create files()；const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；const path=require(' path ')；const extractextplugin=require(' extract-text-web pack-plugin ')；让html plugins=[]；let Entries={ }；files . map(file={ HTMl plugins . push(new HTMl webpackkplugin({ filename : ` $ { file . name } . html `，template: file.templatePath，chunk s 3360[file . name]}))；entries[file . name]=file . JSpath；});返回{ plugins: [.htmlPlugins，new extractextplugin({ file name : GetPath={ return GetPath(' CSS/[name])。CSS ')；} }) ]，Entries }；};因为我使用了ExtractTextPlugin，这些CSS代码最终会生成到chunk的目录中，成为一个CSS文件。

模板引擎

很难在每个页面上保持相同的UI布局。如果稍微改变一下UI，就要在每一页都改变。很麻烦，容易漏。怎么破？考虑到这一问题，pug模板引擎被引入并在项目中使用。

现在，我们可以使用帕格的特性来创建一个通用组件：

演示帕格

p这是一个常见的组件

然后，当您需要使用这个通用组件时，您可以引入它：

包括“demo.pug”此外，您还可以使用pug提供的所有特殊功能。

在webpack中配置pug也非常简单。首次安装：

NPM我保存开发帕格帕格html加载程序然后改变一切。的html后缀。pug后缀并使用pug语法。

然后向规则添加另一个配置

{test:/。pug $/，use:' pug-html-loader'}同时，index.html的HtmlWebpackPlugin中的plugins对象中使用的模板也应该改为index.pug

Webpack集成eslint

首先发布配置代码：

if(useesList){ loaders . push({ test :/)。js$/，loader : ' eslit-loader '，enforce: 'pre '，include :[path . resolve(_ dirname，' src')]，options : { formatter : require(' style ')})；}通过将ESLint与webpack集成，我们可以确保编译生成的代码没有语法错误，符合编码规范；但是在开发过程中，编译的时候注意到问题可能太慢了。

因此，我建议可以将ESLint集成到编辑器或IDE中。如果我用的是vs代码，我可以用一个叫Eslint的插件，一旦我写的代码有问题，就会马上识别出来。

开发环境和生产环境

首先，在阅读webpacl项目时，我们通常会看文件package.json，因为当您在命令行中键入命令时，

Npm运行devwebpack将在package.json文件中找到脚本属性，并依次分析命令。可以看出，该命令将被相应地执行

复制代码如下： nodemon-watch build/-exec ' cross-env node _ env=development web pack-dev-server-color-progress-config build/web pack . dev . js '

类似地，当写命令时，

将执行npm运行构建脚本

Ross-env node _ env=production web pack-config build/web pack . prod . js这样就可以区分开发环境和生产环境了。

虽然我们将区分环境，但是基于不重复的原则，两个环境的项目的通用配置被集成到(build/webpack.base.js)文件中。然后将配置与webpack-merge插件集成在一起

在webpack中使用jquery

在webpack中使用jquery也非常简单。我们可以在加载器中添加一个配置：

if(useJquery){ loaders . push({//introduction test : require。通过require('jquery ')解析(' jquery ')，使用：[{ loader 3360 ' expose-loader '，//根据需要自定义公开的全局变量的名称，选项： 'jQuery' }，{//与loader :' expose-loader '相同，选项： ' $ ' }]}；}然后当您需要在js文件中使用jq时，只需参考公开的变量名：

从“jQuery”导入$ 1；webpack中使用的类型脚本

在webpack中使用jquery也非常简单。我们可以在加载器中添加一个配置：

if(USets){ loaders . push({ test :/)。tsx？$/，use: 'ts-loader '，exclude :/node _ modules/})；}然后将js文件更改为ts。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。