详解如何使⽤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: solve(__dirname, './src/css/common.css.js'),
// 主页
indexcss: solve(__dirname, './src/css/index.css.js'),
index: solve(__dirname, './src/index.js'),
// 页1
sharecss: solve(__dirname, './src/css/share.css.js'),
share: solve(__dirname, './src/share.js'),
// 页2
assistcss: solve(__dirname, './src/css/assist.css.js'),
assist: solve(__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');
java招聘网站有哪些const CopyWebpackPlugin = require('copy-webpack-plugin');
const jquery = require('jquery');
HtmlWebpackPlugin ⽤于打包出多个html⽂件
CopyWebpackPlugin ⽤于img标签，后⾯说
jquery 就是jquery，全局引⽤
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/public/'
}]), // 吧src下public⽂件夹下的所有内容直接拷贝到dist(输出⽬录)下
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,
})
]
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不在这篇⽂章想说的重点之列，不赘述
最后，附上fig.js⽂件
let actName = 'yourProjectName';//
let actKV = {
name: actName,
entry: {
// 通⽤css
commoncss: solve(__dirname, './src/css/common.css.js'),      // 主页
indexcss: solve(__dirname, './src/css/index.css.js'),
index: solve(__dirname, './src/index.js'),
// 分享页1
sharecss: solve(__dirname, './src/css/share.css.js'),
share: solve(__dirname, './src/share.js'),
// 分享页2
assistcss: solve(__dirname, './src/css/assist.css.js'),
assist: solve(__dirname, './src/assist.js'),
}
};
return {
entry: ,
target: "web",
metro与subway区别
output: {
path: solve(__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({vb数组赋值
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',
jquery下载的文件怎么使用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: '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: solve(__dirname, 'node_modules'),
use:[
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}, {
test: /\.xml$/,
loader: "xml-loader"
}, {
test: /\.(css|less)$/,
loader: "style-loader!css-loader",
jsonobject的parseobject方法},
{
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']
}]
},
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。