之前只知道webpack很强大，但是我没有'我深入研究了它，这次是从头看教程，然后从头开始搭建一个多入口网站的开发脚手架。期间遇到了很多问题，特意整理了一下，希望能给大家一点帮助。多个HTML网站使用webpack的必要性如果接到这样的任务，我们需要开发一个简单的官网，比如只有十几个HTML页面。项目很简单，不需要用什么大框架，但是如果用传统的方式写几个html、js、css，肯定会遇到这些问题：网站导航和底部banner是大家共享的页面，如何实现复用？如果不复用，有变化就改n页，太傻了。更改后如何强制清除用户缓存？我们不可能要求用户手动清除浏览器缓存，那太傻了。我想使用ES6进行js开发。如何解决浏览器兼容性问题？我想用less做css样式开发，怎么转换？可见，如果没有自动化打包工具的加入，我们是很难解决这些问题的，所以使用webpack势在必行。要达到的目标看到这里，可能有的同学着急了，废话少说，直奔主题，不行！让我们先设定目标吧！不管做什么事，都要先定下目标，而不是计较自己到了哪里，这样就不会有大的进步。正是在通往目标的道路上，我们克服了各种困难，我们才能取得进步。搭建脚手架前，希望能打包成多个html文件和js文件，即支持多个entry文件名带hash值，解决缓存问题，复用headernavigationbar和bottombanner网站。使用less写样式可以支持ES6开发。使用方便。添加页面不需要手动更改webpack的入口设置。希望能根据目录下的文件自动配置。不想通过js动态插入css样式，会导致页面闪烁，希望直接把css地址引入到html中，就像平时开发一样，可以实时看到开发效果。构建可以压缩代码。目标已定。开始工作时不要担心目录结构。写代码，一个好的目录可以让我们思路清晰，我的目录结构如下+config//环境变量配置文件，开发模式和生产模式使用不同的环境变量，比如接口地址，使用的接口域名开发环境为http://a.com，生产环境使用http://b.com-dev.env.js//本地开发变量-prod.env.js//生产环境变量+src+css//Ownlesscomponentorthird-partycsslibrary+component//less+libofitsowncomponents//第三方css库，比如bootstrap+html//html代码，主要是一些模板，比如headernavigation,bottomcolumn,sidebar+tpl//模板文件+img//图片文件+js//自己的js组件库或者第三方js库+mod//这里是自己的js组件+lib//第三方js库+page//页面文件+index//这个根据自己的情况设置。有些页面相关性高，可以放在一个文件夹中，比如用户文件夹，可以放在个人中心Allpages-index.html//每个页面必须有一个html-index.js//每个页面必须有一个js，名字和html的名字一致-index.less//每个页面必须有一个同名的less文件+test-test.html-test.js-test.less+webpack//webpack配置file-dev-server.js//开发服务设置，可以通过localhost访问页面，实时编译页面-webpack.common.js//开发环境和生产环境通用配置-webpack.dev.js//开发环境的具体配置-webpack.prod.js//生产环境的具体配置首先是config目录，目前我主要放一些环境变量，就是开发环境和生产环境不一样的变量，比如接口地址。我们开发的时候使用本地的api接口地址，打包的时候需要替换成生产环境的api地址。webpack目录存放webpack配置文件，其中开发和生产的通用配置放在webpack.common.js，开发专用的配置放在webpack.dev.js，生产专用的配置放在webpack.prod.js。src是我们开发的主目录。页面目录包含我们的页面文件。这可能与往常不同。我把每个页面用到的html、js和less文件都放在一起了。有的同学可能会把html全部放在一个目录下，而js放在一个目录下，但是这种方式有一个问题。每次换页都要翻目录，很不方便。我们应该把这些高度相关的文件放在一起，提取出来，各种css组件或者js组件可以单独放在页面之外。github地址：https://github.com/501351981/...多入口配置webpack支持多入口，即给定多入口js文件，可以输出多个js文件，那么html呢？我希望开发过程是这样的。我在html中设置标题、SEO等信息，编写HTML内容代码，webpack会自动将相关js文件插入到html底部。是的，这个需要使用html-webpack-plugin插件，调用html模板文件即可打包最终的html。安装html-webpack-pluginnpminstall--save-devhtml-webpack-pluginwebpack.common.js多入口配置constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:[index:'../src/page/index/index.js',测试:'../src/page/test/test.js'],输出:{文件名:'[name].[hash].js',//输出名称后跟哈希值以解决缓存问题path:path.resolve(__dirname,'../dist')},....template:'../src/page/index/index.html',chunks:['index'],})newHtmlWebpackPlugin({filename:'test.html',template:'../src/page/test/test.html',chunks:['test'],})]}这个设置有问题。每次添加新页面时，我都必须在此处添加它。很麻烦。我们其实可以读取src/page，src/page下的js文件会自动添加到入口配置中；读取src/page下的所有html文件，自动调用newHtmlWebpackPlugin进行实例化。要读取目录下的所有文件名，我们需要引入glob，首先安装npminstall--save-devglob改进配置constglob=require('glob')constCleanWebpackPlugin=require('clean-webpack-plugin');//多入口js配置，读取src/page下的所有js文件**/*.js')让地图={};for(leti=0;i 首页内容在这里
