webpack多入口打包示例代码
作者：海上彼尚
这篇文章主要介绍了webpack多入口打包的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
webpack多入口打包
首先得确定用webpack构建的应用，再然后后就是确定目录。
这两个js文件分别对应两个html文件，在 html中需要分别引入对应的js文件。处理html中引入的问题可以使用 html-webpack-plugin 这个插件。
配置：
module.exports = {
entry: {
index: path.resolve(__dirname, "./src/index.js"),
map: path.resolve(__dirname, "./src/map.js"),
},
plugins: {
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.html"),
filename: "index.html",
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/map.html"),
filename: "map.html",
}),
}
}webpack：打包示例-打包多入口
入口
entry: {
// 前台
index: './public/assets/js/index', //打包入口项
list: './public/assets/js/list',
search: './public/assets/js/search',
detail: './public/assets/js/detail',
jquery: './public/assets/vendors/jquery/jquery.min.js',
// 后台
},出口
output: {
path: path.join(__dirname, './dist'),
filename: '[name].bundle.js', //多入口写法--打包出同名文件
},对应的插件
plugins: [
//后台
//前台
new Webpack.ProvidePlugin({
$: 'jquery' //全局暴露的第三方库 .不写内置模块的话，报$ is not defined
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './public/index.html'),
chunks: ['index'] //多入口写法--按需导入
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: path.join(__dirname, './public/list.html'),
chunks: ['list']
}),
new HtmlWebpackPlugin({
filename: 'search.html',
template: path.join(__dirname, './public/search.html'),
chunks: ['search']
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: path.join(__dirname, './public/detail.html'),
chunks: ['detail']
})
],完整截图
到此这篇关于webpack多入口打包的文章就介绍到这了,更多相关webpack多入口打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！