详解如何使用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的插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const jquery = require('jquery');

HtmlWebpackPlugin 用于打包出多个html文件

CopyWebpackPlugin 用于img标签，后面说

jquery 就是jquery，全局引用

webpack.config.js里的plugins配置如下

plugins: [
 new webpack.ProvidePlugin({
 $:"jquery"
 }),
 new CopyWebpackPlugin([{
 from: __dirname + '/src/public/'
 }]), // 吧src下public文件夹下的所有内容直接拷贝到dist(

src目录下的文件如下

index.js assist.js share.js是三个文件分别的入口文件

index.html assist.html share.html是三个文件的模板，html代码可以写在这里（当然想用模板文件也是可以的，只要HtmlWebpackPlugin插件支持）

dist文件夹如下

（为什么是htm而不是html，是为了便于读者区分模板文件和输出文件）

我们知道，webpack打包不会打包HtmlWebpackPlugin的template里的img标签下的图片，所以在html里使用了img标签的图片都要放在public文件夹下，CopyWebpackPlugin这个组件会直接把图片复制过去

关于HtmlWebpackPlugin的具体参数的细则可以上网搜一下，很多这方面的内容
其他的比如loader、babel不在这篇文章想说的重点之列，不赘述

最后，附上webpack.config.js文件

 let actName = 'yourProjectName';// 
 let actKV = {
 name: actName,
 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'),

 }
 };
 

 return {
 entry: actKV.entry,
 target: "web",
 output: {
 path: path.resolve(__dirname + '/dist/'+actName),
 // publicPath: '.\\',
 filename: 'js/[name].js',
 // chunkFilename: "[name].chunk.[hash].js",
 },
 plugins: [
 new webpack.ProvidePlugin({
 $:"jquery"
 }),
 new CopyWebpackPlugin([{
 from: __dirname + '/src/public/'
 }]),
 new HtmlWebpackPlugin({
 filename: 'index.htm',
 template: 'src/index.html',
 chunks: ['commoncss', 'indexcss', 'index'],
 inject: 'true',
 hash: true,
 }),
 new HtmlWebpackPlugin({
 filename: 'share.htm',
 template: 'src/share.html',
 chunks: ['commoncss', 'sharecss', 'share'],
 inject: 'true',
 hash: true,
 }),
 new HtmlWebpackPlugin({
 filename: 'assist.htm',
 template: 'src/assist.html',
 chunks: ['commoncss', 'assistcss', 'assist'],
 inject: 'true',
 hash: true,
 })
 ],
 mode: 'development',
 node: {
 __filename: true,
 __dirname: true
 },
 devtool: isProduction ? 'source-map':'inline-source-map',
 devServer:{
 inline: true,
 open: true, 
 historyApiFallback: true, 
 // host: ip.address(),
 host: 'localhost',
 progress: true,
 contentBase: "./dist/",
 port: 3430,
 historyApiFallback:true,
 publicPath:'/src/',
 proxy: {
 '*': {
 target: 'http://127.0.0.1:3430',
 secure: false
 }
 },
 },
 resolve: {
 alias: {
 },
 extensions: ['.js', '.less', '.css', '.vue', '.jsx'],
 },
 externals: {
 },
 module: {
 rules: [{
 test: /\.vue$/,
 loader: 'vue-loader',
 }, {
 test: /\.js$/,
 include: path.join(__dirname,'/src'),
 exclude: path.resolve(__dirname, 'node_modules'),
 use:[
 {
 loader: 'babel-loader',
 query: {
 presets: ['es2015']
 }
 }
 ]
 }, {
 test: /\.xml$/,
 loader: "xml-loader"
 }, {
 test: /\.(css|less)$/,
 loader: "style-loader!css-loader",
 }, 
 {
 test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
 loader: 'url-loader',
 options: {
 limit: 16384,
 name: 'images/[name].[hash:5].[ext]',
 }
 },
 {
 test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
 loader: "file-loader?&name=assets/fonts/[name].[ext]"
 }, {
 test: /\.txt$/,
 loader: "text-loader"
 },{
 test: /\.jsx$/,
 exclude: /node_modules/,
 loaders: ['jsx-loader', 'babel-loader']
 }]
 },
 
 }