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

虽然是2019年，但是还是有一些项目需要用到jquery。然而，考虑到使用jquery中的一堆兼容性问题，为了成功地使用ES6来研究代码，我们使用webpack babel来打包代码并发布它

几个关键点：

1.为了拆分和加载模块，使一个js文件不会太大，在一个页面中使用多个js文件。2.因为它是一个多页项目(多个html)，所以每个页面中使用的js文件是不一致的。基于以上两点，需要配置多个条目文件。3.小图片会转换成base64，所以有可能从css转换过来的js文件会比较大，所以条目js会为css文件单独设置

例如，我们有三个页面：索引、共享和辅助

三个页面有一个共同的css文件：common.css。

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

entry : {//general CSS common CSS : path . resolve(_ dirname，'。/src/CSS/common.css.js ')，//home page index CSS : path . resolve(_ _ dirname，/src/CSS/index.css.js ')，index : path . resolve(_ _ dirname，'。/src/index.js ')，//page 1 sharecss : path . resolve(_ _ dirname，/src/CSS/share.css.js ')，share : path . resolve(_ _ dirname，'。/src/share.js ')，//page 2 assist CSS : path . resolve(_ _ dirname，/src/CSS/assist.css.js ')，assist : path . resolve(_ _ dirname，'。/src/assist.js ')，}其中在common.css.js文件中只有几行代码

“进口”./CSS/base . CSS '；“进口”./CSS/plugin . CSS '；“进口”./CSS/common . CSS '；common.css.js文件的结尾

因为会有一些base64的图片，大小大概是100 KB

同样，index.css.js、share.css.js和assist.css.jsindex.css.js如下

“进口”./CSS/index . CSS '；是的，就一句话

打包的js文件的大小取决于引入了多少小图片，通常是几百KB

然后，使用三个网络包的插件

const HTMlWebPackLugin=require(' HTMl-web pack-plugin ')；const CopyWebPackplugin=require(' copy-web pack-plugin ')；const jquery=require(' jquery ')；HtmlWebpackPlugin用于打包多个html文件

CopyWebpackPlugin用于img标签，后面会讲到

Jquery是jquery，一个全局引用

webpack.config.js中的插件配置如下

plugins: [新webpack。ProvidePlugin({ $:'jquery' })，新的CopyWebpackPlugin([{ from : _ _ dirname '/src/public/' })，//src下的公共文件夹中的所有内容都直接复制到新的html webpackplugin({ filename : ' index . htm '，template3360' src/index.html '，chunk s 3360[' common CSS '，' indexcss '，' index']，inject: 'true

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

Index.htmlassist.htmlshare.html是三个文件的模板，html代码可以写在这里(当然，也可以使用模板文件，只要HtmlWebpackPlugin插件支持)

分配文件夹如下

(为什么用html代替html是为了方便读者区分模板文件和输出文件)

我们知道，webpack打包不会将html中的模板中img标签下的图片打包，所以在html中使用img标签的图片应该放在公共文件夹下，CopyWebpackPlugin组件会直接将图片复制过去

HtmlWebpackPlugin的具体参数的细节可以在网上搜索，这个领域的很多其他内容，比如loader和babel，都不是本文的重点，所以就不详细描述了

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

让actName=' yourProjectName//让actKV={ name: actName，entry: { //通用CSS常用CSS :路径。解析(_ dirname，' ./src/css/common.css.js ')，//主页索引CSS :路径。解析(_ dirname，' ./src/css/index.css.js ')，index :路径。解析(_ _ dirname，' ./src/index.js ')，//分享页1 sharecss:路径。解析(_ dirname，' ./src/css/share.css.js ')，共享：路径。解析(_ dirname，' ./src/share.js ')，//分享页2辅助ss :路径。解析(_ dirname，' ./src/css/assist.css.js ')，assist :路径。解析(_ dirname，' ./src/assist.js ')，} }；返回{ entry: actKV.entry，target: 'web '，输出： { path : path。解析(_ dirname '/dist/' actName)，//publicPath: ' .\\ '，filename: 'js/[name].js '，//chunkfilename : '[name]。大块[散列].js '，}，plugins: [新网络包.ProvidePlugin({ $:'jquery' })，新的CopyWebpackPlugin([{ from : _ _ dirname '/src/public/' }])，新的html webpackplugin({ filename : ' index。htm '，template: 'src/index.html '，chunk 3360[' commoncss '，' indexcss '，' index']，inject: 'true '，hash: true，})，新的html web web 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 .13: '，secure: false } }，resolve: { alias: { }，扩展名s :[].js '，' .少了","。css '，' .呜呜呜.jsx']，}，externals: { }，模块： { rules 3360 [{ test :/\ .vue$/，loader :“vue-loader”，}，{ test: /\ .js$/，包括：路径。联接(_ dir名称，'/src ')、排除：路径。解析(_ dir name 、' node_modules ')、使用：[{ loader : ' babel-loader ')、查询： {预设s :[' es 2015 ']} }]}、{ 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: '文件加载器？名称=资产/字体/[姓名].[ext]' }，{ test: /\ .txt$/，loader: 'text-loader' }，{ test: /\ .jsx$/，exclude: /node_modules/，loaders: ['jsx-loader '，' babel-loader'] }] }，}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。