详解如何快速配置webpack多入口脚手架(3)

//config/index.js 改造后 const paths = require('./paths') const resolve = relativePath => path.resolve(paths.projectPath, relativePath) const _config = require(resolve('config.js')) // 子项目webpack配置 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', proxyTable: _config.dev.proxyTable, // Various Dev Server settings host: '0.0.0.0', // can be overwritten by process.env.HOST }, build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: _config.build.assetsRoot || path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: _config.build.publichPath || './', // 省略 }

到这里，我们的多入口配置就基本完成了，注意修改过的配置文件里一些引用需要加上，检查下路径是否正确。

既然我们的目的就是打造多入口模板，那么以demo2为例，运行npm run dev 在如果服务是:8080,多页面入口在浏览器访问时url就是:8080/more.html。注意要带.html哦。

运行npm run build 我们会发现dist文件夹里有2个html，说明多入口打包成功

到此我们的项目模板就配置完成了。以后多人开发、多入口活动都可以在这个项目下进行开发了，此篇不涉及webpack优化，只提供一种配置思路。如果感觉文章写的不够清楚，或者想直接使用这个模板，我的git上有完整的脚手架

传送门 ，如果遇到问题或者好的建议，欢迎提出。