前言第一次接触webpack是因为使用了Vue，因为Vue的脚手架就是使用webpack搭建的。一开始觉得webpack就是为打包单个页面而生的。后来想了想，这么好的打包方案只用在单个页面上，是不是太浪费资源了？如果webpack可以用在传统的多页面上，一开始会不会效率更高？幸运的是，很多优秀的前端开发者写了很多demo和文章供人们学习。自己也写了一个小项目，希望对大家学习webpack有所帮助。好吧，其实以上都是废话，接下来附上项目地址和干货，比较好吃。webpack-多页项目SPA解决的问题好复杂，我还是喜欢如何打破传统的多页应用？或者，我们的项目需要后端渲染，如何获取页面模板？很难在每个页面上保持相同的UI布局。如果你稍微改变了UI，你必须去每个页面去改变它。很麻烦，也很容易错过。怎么破？可以集成到ESLint中检查语法吗？能否集成postcss增强浏览器兼容性？我可以在webpack中使用jquery吗？我可以在webpack中使用typescript吗？src目录对应dist目录。当我们使用webpack打包多个页面时，我们希望src目录对应打包后的dist目录，如上图所示。开发按照页面模块的思路搭建开发结构，然后通过webpack打包生成传统页面的结构。/***创建包路径*/constcreateFiles=function(){constusePug=require('../config').usePug;constuseTypeScript=require('../config').useTypeScript;constpath=require('路径');constglob=require('glob');常量结果=[];常量类型=usePug？'哈巴狗'：'html';constscriptType=useTypeScript？'ts'：'js'；constfiles=glob.sync(path.join(__dirname,`../src/views/**/*.${type}`));for(fileoffiles){result.push({name:usePug?file.match(/\w{0,}(?=\.pug)/)[0]:file.match(/\w{0,}(?=\.html)/)[0],templatePath:file,jsPath:file.replace(type,scriptType),stylePath:file.replace(type,'stylus')});}返回结果;};使用这个方法，我们可以得到需要打包的文件路径（文件路径在方法中获取模块的模块也可以使用fs模块），根据打包文件的路径，我们可以使用html-webpack-plugin实现多页面打包。由于html-webpack-plugin的每个对象实例只针对/生成一个页面，如果我们制作一个多页面应用程序，我们需要配置多个html-webpack-plugin对象实例：constplugins=function(){constfiles=创建文件（）；constHtmlWebpackPlugin=require('html-webpack-plugin');constpath=require('路径');constExtractTextPlugin=require('extract-text-webpack-plugin');让htmlPlugins=[];让条目={};files.map(file=>{htmlPlugins.push(newHtmlWebpackPlugin({filename:`${file.name}.html`,template:file.templatePath,chunks:[file.name]}));Entries[file.名称]=file.jsPath;});return{plugins:[...htmlPlugins,newExtractTextPlugin({filename:getPath=>{returngetPath('css/[name].css');}})],条目};};由于我使用了ExtractTextPlugin，这些CSS代码最终会以CSS文件的形式生成到它们所属chunk的目录下。在模板引擎的每个页面上保持相同的UI布局是非常困难的。如果你稍微改变了UI，你必须去每个页面去改变它。很麻烦，也很容易错过。怎么破？考虑到这个问题，项目引入并使用了pug模板引擎。现在，我们可以利用pug的特性来创建一个公共组件：demo.pugp这是一个公共组件，然后，当你需要使用这个公共组件时，你可以引入它：include'demo.pug'另外，你还可以使用所有哈巴狗特有的功能。在webpack中配置pug也很简单，先安装：npmi--save-devpugpug-html-loader然后把所有.html后缀改成.pug后缀，使用pug语法。然后在规则中添加另一个配置{test:/\.pug$/,use:'pug-html-loader'}并将plugins对象中index.html中使用的HtmlWebpackPlugin中的模板更改为索引.pug。webpack集成eslint，先放出配置代码：__dirname,'src')],options:{formatter:require('stylish')}});}通过webpack集成ESLint，可以保证编译生成的代码没有语法错误，符合编码规范；但是在开发过程中，可能会等到编译时才意识到问题太慢了。因此，我建议可以将ESLint集成到编辑器或IDE中。比如我自己用vscode，可以用一个叫Eslint的插件。一旦我写出有问题的代码，它就会立即被标记出来。Dev环境和prod环境首先，在阅读一个webpacl项目时，通常会先看package.json文件。因为当你在命令行输入下一个命令npmrundevwebpack时，你会在package.json文件中找到script属性，依次分析命令。可以看出这个命令会执行nodemon--watchbuild/--exec\"cross-envNODE_ENV=developmentwebpack-dev-server--color--progress--configbuild/webpack.dev.js\"类似，当写命令npmrunbuildscript时，ross-envNODE_ENV=productionwebpack--configbuild/webpack.prod.js可以区分是开发环境还是生产环境。虽然我们会区分环境，但本着不重复的原则，项目对两种环境的通用配置都整合到了（build/webpack.base.js）文件中。然后使用webpack-merge插件将配置整合在一起。在webpack中使用jquery在webpack中使用jquery也很简单。我们可以给加载器添加一个配置：',//暴露的全局变量的名字可以自定义options:'jQuery'},{//同上loader:'expose-loader',options:'$'}]});}那么当需要在js文件中使用jq，参考暴露的变量名即可：import$from'jQuery';webpack在webpack中使用jquery使用typescript也很简单，我们可以在loaders中添加一个配置：if(useTs){loaders.push({test:/\.tsx?$/,use:'ts-loader',exclude:/node_modules/});}然后把js文件改成ts。之后欢迎大家提交pr，共同搭建。
