本文详细记录了基于webpack的多页面应用配置过程。从确定目录结构开始，区分开发与生产环境，通过全局和局部安装依赖，利用webpack-merge合并配置。重点讲解了如何自动获取入口文件、分离第三方库以及使用HTMLWebpackPlugin生成HTML，旨在提供一套实用的多页面构建方案。
多页面配置背景与目标
此前曾撰写过webpack的学习笔记，由于当前项目需要一套常用的多页面配置方案，因此着手进行实践。秉持着精简代码的原则，开始了webpack的配置工作。
目录结构设计
确定目录结构
首先仅需区分开发环境（支持自动更新）和打包环境，初步规划的目录结构如下所示。
经过反复权衡，最终根据习惯确定了如下目录结构：
app
-libs # 第三方插件库，可以是css也可以是js，eg：jq
-static # 公共的静态资源文件夹
-temlates # 模板文件夹
-*** # 模块文件夹
-css # 当前模块独有的css文件需要在index.js中import
-html # 模板文件，计划支持html，pug两种模板语言
-index.js # 当前模块入口文件Webpack基础配置与依赖安装
配置webpack
按照上述规划建立文件后，在根目录下新建webpack.config.js文件。
接着进行全局安装webpack和webpack-dev-server。
npm i webpack webpack-dev-server -g随后进行局部安装。
npm i webpack webpack-dev-server --save-dev此时项目已能引入webpack，并可使用webpack-dev-server的相关功能。webpack.config.js的内容较为简单，主要依据环境变量中指定的当前环境来加载不同的webpack配置。
// 未指定这手动指定为生产环境
process.env.NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV : 'product';
// 获取环境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace( /(\s*$)|(^\s*)/ig, "" );
// 根据环境变量引用相关的配置文件
module.exports = require( `./config/webpack.config.${env}.js` )环境配置分离与合并策略
在config文件夹下分别新建webpack.config.dev.js和webpack.config.product.js，分别代表开发环境的配置和生成打包文件的配置。考虑到大量配置项相同，再建立一个webpack.config.base.js用于编写统一配置。
webpack.config.dev.js与webpack.config.product.js的区别在于前者是运行时配置，后者是文件生成配置。简而言之，开发环境的差异主要体现在配置webpack-dev-server，而生产环境则侧重于压缩、map等配置。
核心配置：入口、输出与插件
webpack.config.base.js文件才是webpack配置的核心，包含entry、output、modules、plugins等关键部分。
获取所有入口文件的文件夹路径。
function getEntryDir() {
let globPath = 'app/templates/**/*.' + config.tplLang
// (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
let pathDir = 'app(\/|\\\\)(.*?)(\/|\\\\)html'
let files = glob.sync( globPath )
let dirname, entries = []
for ( let i = 0; i < files.length; i++ ) {
dirname = path.dirname( files[ i ] )
entries.push( dirname.replace( new RegExp( '^' + pathDir ), '$2' ) )
}
return entries;
}注入entry并生成HTMLWebpackPlugin实例。
getEntryDir()
.forEach( ( page ) => {
let moduleName = page.split( '/' )
let moduleNameStr = moduleName[ moduleName.length - 1 ]
const htmlPlugin = new HTMLWebpackPlugin( {
filename: `${moduleNameStr}.html`,
template: path.resolve( __dirname, `../app/${page}/html/index.${config.tplLang}` ),
chunks: [ moduleNameStr, 'vendors' ],
} );
HTMLPlugins.push( htmlPlugin );
Entries[ moduleNameStr ] = path.resolve( __dirname, `../app/${page}/index.js` );
} )关于HTMLWebpackPlugin的具体用法，可参考html-webpack-plugin用法全解以及官方文档，已有非常详尽的说明。
第三方库与HTML生成处理
自动获取第三方库入口。
function getVendors() {
let globPath = `app/${config.libraryDir}/**/*.*`
let files = glob.sync( globPath )
let libsArr = []
files.forEach( ( v, i ) => {
libsArr.push( './' + v )
} )
return libsArr
}
Entries[ 'vendors' ] = getVendors() // 第三方类库其中多页面入口和第三方库的配置，请参考这篇webpack中文站文档关于分离应用程序(app)和第三方库(vendor)入口的介绍。
output配置部分。
output: {
filename: "static/js/[name].bundle.[hash].js",
path: path.resolve( __dirname, config.devServerOutputPath )
}
配置合并与总结
webpack配置合并处理。
主要使用一个webpack插件webpack-merge，可将分开配置的config合并，从而区分生产环境和调试环境。
最后附上github地址: webpack-multi-skeleton，如有不当之处，欢迎指正！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。