webpack打包jquery多页_详解如何使用webpack打包多页jquery项目

虽然已经2019年了

不过有一些项目

还是需要用到jquery的

不过考虑到使用jquery的一堆兼容性问题

也为了可以顺利地使用ES6来撸代码

研究使用webpack+babel打包代码来发布

几个重点：

1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件

2.由于是多页项目(多个html)，每个页面使用的js文件都不一致

基于以上两点，需要配置多个入口文件

3.会把小图片转换成base64，所以可能css转成的js文件会比较大，所以css文件都单独设置入口js

例如，我们有三个页面：index、share、assist

三个页面有通用的css文件：common.css

设置入口文件时，可以这样设置

entry: {

// 通用css

commoncss: path.resolve(__dirname, './src/css/common.css.js'),

// 主页

indexcss: path.resolve(__dirname, './src/css/index.css.js'),

index: path.resolve(__dirname, './src/index.js'),

// 页1

sharecss: path.resolve(__dirname, './src/css/share.css.js'),

share: path.resolve(__dirname, './src/share.js'),

// 页2

assistcss: path.resolve(__dirname, './src/css/assist.css.js'),

assist: path.resolve(__dirname, './src/assist.js'),

}

其中，common.css.js文件中，只有几行代码

import '../css/base.css';

import '../css/plugin.css';

import '../css/common.css';

common.css.js文件结束

由于会有一些图片的base64，所以大小大约100+KB

类似的还有index.css.js和share.css.js和assist.css.js

index.css.js如下

import '../css/index.css';

对，就一句话

打包出来的js文件大小就看引入了多少小图片了，一般几百KB

然后，要使用三个webpack的插件

co