详解如何使用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(输出目录)下
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不在这篇文章想说的重点之列，不赘述
最后，附上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']
}]
},
}
绛旓細// 灏 绗笁鏂逛緷璧 鍗曠嫭鎵撳寘 vendor: Object.keys(json.dependencies)},output: { path: __dirname + "/build",filename: "[name].[chunkhash:8].js",publicPath: '/'},// ...鐪佺暐鑻ュ共琛...plugins: [// ...鐪佺暐鑻ュ共琛...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor',f...
绛旓細1. 鎵撳寘澶氫釜椤甸潰鐨刯s鏂囦欢 璇诲彇src/views涓嬬殑鐩綍锛岀害瀹氭瘡涓涓洰褰曞綋鎴愪竴涓〉闈紝鎵撳寘鎴愪竴涓猨s chunk銆 2. 鎵撳寘澶氫釜html 寰幆鐢熸垚澶氫釜HtmlWebpackPlugin鎻掍欢锛屾妸姣忎竴涓彃浠剁殑chunks鍚勮嚜鎸囧悜涓婇潰鎵撳寘鐨刯s chunk銆
绛旓細webpack鎶婂悇涓ā鍧楃殑css鎵撳寘鎴愪竴涓柟娉曪細webpack.config.js閰嶇疆濡備笅 var ExtractTextPlugin = require("extract-text-webpack-plugin");//extract-text-webpack-plugin瀹夎姝ゆ彃浠 module:{ loaders:[{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} ]},plugin...
绛旓細涓轰簡鏇村ソ鐨勬帉鎻★紝鎵撶畻閫氳繃缁冧範鏉ュ姞寮哄webpack鐨勭悊瑙ｃ傛帴涓嬫潵杩樹細閽堝寮鍙戜腑鐩稿叧鐨勬妧鏈紝鍋氭繁鍏ョ殑缁冧範锛屽苟涓斿啓涓绯诲垪鏂囩珷銆傛湰鏂囦富瑕佺洰鐨勬槸瀵归」鐩紑鍙戝拰鑷繁缁冧範涓webpack鐨勪娇鐢紝鍋氫竴涓荤粨銆備粙缁嶅紑鍙憊ue.js鍗曢〉闈㈠墠绔簲鐢ㄦ椂锛濡備綍浣跨敤webpack鏉鎵撳寘銆傛湰鏂囧悓鏃朵篃鏄箣鍓峳eact绯诲垪鏂囩珷鐨勫欢缁備綔涓轰竴涓畬鏁寸殑...
绛旓細--鐢―TS绉绘鏁版嵁--鏁版嵁杞崲鏈嶅姟(Data Transformation Services锛岀畝绉癉TS),瀹冨彲浠ュ湪浠绘剰鏁版嵁婧愪箣闂寸Щ鍔ㄦ暟鎹紝骞跺湪绉诲姩杩囩▼涓鏁版嵁杩涜娓呮礂--DTS閫氬父鐢ㄤ簬灏嗘暟鎹Щ鍔ㄥ埌SQL Server锛屼絾瀹為檯涓婂畠鍙互鏂逛究鍦板湪鍑犱箮鎵鏈夌殑鏁版嵁婧愪箣闂寸Щ鍔ㄦ暟鎹--娉ㄦ剰锛氣滃鍒舵暟鎹簱鍚戝鈥濆拰鈥滃鍏/瀵煎嚭鍚戝鈥濆疄闄呭彧鏄垱寤哄拰鎵ц浜咲TS鍖...
绛旓細绗1姝ュ畨瑁卋ootstrap-loader npm install bootstrap-loader --save 绗2姝 濡傛灉浣浣跨敤鐨勬槸Bootstrap3 npm install bootstrap-sass --save 濡傛灉浣犱娇鐢ㄧ殑鏄疊ootstrap4 npm install [email protected] --save 鎴戝彂鐜皀pm涓嬭浇涓嶄簡bootstrap4,鎵浠ユ垜鏄粠缃戜笂涓嬭浇涓嬫潵鐨勶紝鐒跺悗鏀惧埌 node_modules涓嬬殑...
绛旓細绗1姝ュ畨瑁卋ootstrap-loader npm install bootstrap-loader --save 绗2姝 濡傛灉浣跨敤鐨勬槸Bootstrap3 npm install bootstrap-sass --save 濡傛灉浣跨敤鐨勬槸Bootstrap4 npm install [email protected] --save 鍜卞彂鐜皀pm涓嬭浇涓嶄簡bootstrap4,鎵浠ュ挶鏄粠缃戜笂涓嬭浇涓嬫潵鐨勶紝鐒跺悗鏀惧埌 node_modules涓嬬殑,...
绛旓細瀹夎Webpack鍙婂叾浠栫粍浠 瀹夎Webpack涔嬪墠寤鸿鍏堝畨瑁匩ode.js锛岀劧鍚庨噰鐢╪pm鐨勬柟寮忔潵瀹夎Webpack锛 npm install webpack -g 鍥犱负瑕鐢鍒癮ngular锛屾墍浠ヨ瀹夎angular锛 npm install angular 杩樿瀹夎涓绯诲垪鍔犺浇鍣(loader)锛 npm install style-loader
绛旓細鍑犱箮鎵鏈変笟鍔＄殑寮鍙戞瀯寤洪兘浼鐢鍒 webpack 銆傜殑纭,浣滀负妯″潡鍔犺浇鍜鎵撳寘绁炲櫒,鍙渶閰嶇疆鍑犱釜鏂囦欢,鍔犺浇鍚勭 loader 灏卞彲浠ヤ韩鍙楁棤鐥涙祦绋嬪寲寮鍙戙備絾瀵逛簬 webpack 杩欐牱涓涓鏉傚害杈冮珮鐨勬彃浠堕泦鍚,瀹冪殑鏁翠綋娴佺▼鍙婃濇兂瀵规垜浠潵璇磋繕鏄緢閫忔槑鐨勩傞偅涔堟帴涓嬫潵鎴戜細甯︿綘浜嗚В webpack 杩欐牱涓涓瀯寤洪粦鐩,棣栧厛鏉ヨ皥璋堝畠鐨勬祦绋嬨 鍑嗗宸...
绛旓細鍩烘湰鐢ㄦ硶浣跨敤dll鏃讹紝鍙互鎶婃瀯寤鸿繃绋嬪垎鎴恉ll鏋勫缓杩囩▼鍜屼富鏋勫缓杩囩▼锛堝疄璐ㄤ篃灏辨槸濡傛锛夛紝鎵浠ラ渶瑕佷袱涓瀯寤洪厤缃枃浠讹紝渚嬪鍙仛webpack.config.js鍜寃ebpack.dll.config.js銆1. 浣跨敤DLLPlugin鎵撳寘闇瑕佸垎绂诲埌鍔ㄦ佸簱鐨勬ā鍧桪llPlugin鏄痺ebpack鍐呯疆鐨勬彃浠讹紝涓嶉渶瑕侀澶栧畨瑁咃紝鐩存帴閰嶇疆webpack.dll.config.js鏂囦欢锛歮odule....
