本文介绍如何使用webpack进行多入口文件配置及业务模块拆分。通过定义entry对象和使用CommonsChunkPlugin插件，可将login和reg等模块单独打包。此外，还讲解了利用externals配置将jQuery等第三方库排除在打包之外，转而通过CDN引入，以优化生产环境加载性能。
Webpack多入口与模块拆分打包实战教程
目前我正在深入探索webpack的使用技巧，今天分享一种将业务模块分别打包的方法，同时也作为个人学习笔记整理。
多入口文件配置
接下来探讨如何对三个JavaScript文件进行打包处理。
只需调整webpack的配置文件webpack.config.js即可实现。
// entry是入口文件，可以多个，代表要编译那些js
entry:['./src/main.js','./src/login.js','./src/reg.js'],按照上述配置执行打包后，最终会在./build/js目录下生成build.js文件。
模块拆分与独立打包
1. 若需最终生成不同文件，应如何实现？
这里需要引入webpack的模块拆分插件来完成该任务。
entry:
{
'main':'./src/main.js',
'user':['./src/login.js','./src/reg.js']
},
我们将login.js和reg.js都归类到user节点下，接下来演示如何单独打包这个user节点，核心代码配置如下。
// 拆分插件
new webpack.optimize.CommonsChunkPlugin({
name:'user', // 上面入口定义的节点组
filename:'build-user.js' //最后生成的文件名
}),
以下是webpack.config.js的完整配置代码。
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
// entry是入口文件，可以多个，代表要编译那些js
//entry:['./src/main.js','./src/login.js','./src/reg.js'],
entry:
{
'main':'./src/main.js',
'user':['./src/login.js','./src/reg.js']
},
output:{
path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录）
filename:'build.js' //最终打包生产的文件名
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/login-build.html',
template:__dirname+'/src/tpl/login.html',
inject:'head',
hash:true
}),
// 拆分插件
new webpack.optimize.CommonsChunkPlugin({
name:'user', // 上面入口定义的节点组
filename:'build-user.js' //最后生成的文件名
}),
]
};
接着观察HTML模板文件随之发生的变化。
第三方库外部引用配置
那么，如何处理jQuery这类第三方库的打包问题呢？
实际上，像jQuery这样的库在生产环境中通常通过CDN引入，而不会与业务代码混合打包。例如国内常用的CDN地址为：http://cdn.bootcss.com/jquery/1.12.4/jquery.js。
externals:{
‘jquery':'jQuery'
},
1. 在源模板文件login.html中引入jQuery。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<scritp src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></scritp>
</head>
<body>
<h2>用户登录</h2>
<p>用户名：</p>
<p><input type="text" name="username" id="username" /></p>
<p>密码：</p>
<p><input type="password" name="pwd" id="pwd" /></p>
<p><button id="loginBtn">登录</button></p>
</body>
</html>2. 修改webpack配置文件以支持外部库引用。
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
// entry是入口文件，可以多个，代表要编译那些js
//entry:['./src/main.js','./src/login.js','./src/reg.js'],
entry:
{
'main':'./src/main.js',
'user':['./src/login.js','./src/reg.js']
},
externals:{
'jquery':'jQuery'
},
output:{
path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录）
filename:'build.js' //最终打包生产的文件名
},
plugins:[
new HtmlWebpackPlugin({
filename: __dirname+'/build/html/login-build.html',
template:__dirname+'/src/tpl/login.html',
inject:'head',
hash:true
}),
// 拆分插件
new webpack.optimize.CommonsChunkPlugin({
name:'user', // 上面入口定义的节点组
filename:'build-user.js' //最后生成的文件名
}),
]
};
3. 执行webpack命令后，生成的js文件中不再包含jquery源码，因为配置了使用外部CDN，同时打包后的html模板中也保留了jquery的引入链接。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。