阅读 1462

多页项目的webpack配置

在我们使用vue,angular等框架开发的时候,大多数都是构建单页项目。而且,像这样的框架都有对应的命令一步生成webpack配置(比如vue的vue init webpack my-project之类)。


但是如果我们要开发多页面项目的时候就没有这么方便了,你必须要自己配置webpack。

单页项目和多页项目的区别在于单页项目所有的js,css等资源只需要在入口html文件中引入,你甚至都不需要额外配置,像html-webpack-plugin这样的插件自动就帮你把js和css插入了到入index.html中了。

而多页项目下每个页面除了有部分共享资源外,还需要引入每个页面单独的js,css等文件。

面对这个区别,关键就在于html-webpack-plugin插件的配置。

首先我们假设所有的页面入口文件都在 src/html/ 下,这样我们可以通过nodejs的fs模块同步读取该目录下的所有文件的名字:

let htmlArr = fs.readdirSync(path.resolve(__dirname, 'src/html'));
复制代码

htmlArr中将会保存一个html目录下所有文件名的一个数组,然后我们通过遍历这个数组来获取webpack的entry配置对象和html-webpack-plugin的配置对象:

let entrys = {};
let htmlPlugins = [];
 
for(let item of htmlArr){
	//我们只需要.html前面的文件名
	let name = item.split('.html')[0];
	htmlPlugins.push(new WebpackHtmlPlugin({
		filename: item,
		template: path.resolve(__dirname, `src/html/${item}`),
		//common代表公共模块,name就是html对应的同名js文件
		//这个配置将会自动在生成的html中插入你指定的js
		chunks: ['common', name]
	}));
	//配置入口
	entrys[name] = `./src/js/${name}.js`;
};
复制代码

接下来在webpack配置中传入上面生成的entrys和htmlPlugins配置对象:

module.exports = merge(base, {
	//传入entry配置
	entry: entrys,
	devtool: "cheap-module-eval-source-map",
	devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 8080,
		//hot: true,
		index: 'index.html',
		open: true
	},
	plugins: [
		//传入html-webpack-plugin配置对象
		...htmlPlugins,
	]
});
复制代码

以上配置是我开发环境下的配置,生产环境下内容会多一点点。配置好之后编译,你就就会发现html-webpack-plugin为你生成了多个页面入口html:



其中一个比较关键的地方除了html-webpack-plugin的配置外就是使用node的fs模块同步读取html文件夹中所有文件的名字,这样你只要在文件夹中新增一个页面入口webpack就能自动读取到:

当然这都是些基础配置,不过已经可以拿来用了。

这里我将我的配置内容上传到了github上:github.com/CSLLG/muti-…

---------------------------8月26日补充内容--------------------------------------

今天补充了更多配置,具体如下:

2018.8.26最新更新

1、完善url-loader对图片资源的处理功能

2、添加html-withimg-plugin处理html中img标签src属性引入的图片

3、把所有配置文件迁移到 './build/' 路径下,目的是让配置文件看起来更整洁

4、加入process.evn.NODE_ENV环境配置

5、添加mini-css-extract-plugin,把css文件从bundle.js中独立成单独的css文件

这次配置调整中遇到的问题及解决方案记录:

1、按理说使用url-loader处理图片应该不需要下载file-loader,但是当图片大小超过限制编译就会报“can not find modlue file-loader”的错,官方文档是说“当图片大小超过限制时会默认使用file-loader”,但不知具体原因是否是因为新版本url-loader将file-loader的功能剔除了。

2、webapck4.0+以上版本不再推荐使用extract-text-webpack-plugin处理css模块,而是推荐mini-css-extract-plugin

不过这里有一个问题,就是当你把css文件放入dist/css/目录下将会导致css中引用的图片路径出错,网上有很多人推荐的解决方案是在output配置中加入 publicPath: '../' 配置,

但其实这样会导致除了css中引用图片的路径是对的外其他所有文件中的路径都是错的,甚至导致css文件引入错误。

最优的解决方案是在引入MiniCssExtractPlugin.loader时使用对象方式,并在options目录下添加 publicPath: '../' 配置

具体配置请查看配置文件

其他的一些问题和对应解决方案会独立出一篇文章来论述,谢谢

最后,感谢你的耐心阅读,如果对你有帮助可以点个赞哦!



文章分类
前端