webpack多入口配置与指定路径打包详解
本文介绍webpack中通过配置entry实现多文件独立打包的方法，并详细讲解如何通过修改entry中的路径前缀，将生成的JS文件分别存放至dist目录下的指定子文件夹中。
webpack多入口与指定路径打包配置
使用webpack进行项目构建时，通过require引入文件是一种便捷的开发方式。
然而，这种将所有依赖整合到单一包中的做法，往往会导致最终生成的文件体积过大。
为了解决这一问题，我们需要了解如何配置webpack，将需要的内容模块分别打包。
同时，还需要掌握如何按照预设的存放路径来输出这些打包文件。
首先，我们需要在webpack.config.js配置文件中进行相关设置。
在entry（入口）配置项中，明确指定哪些模块需要单独打包成一个独立的JS文件。
entry: {
main: path.resolve(__dirname,'src/index.js'),
jq: ['jquery'],
react: ['react'],
redom: ['react-dom']
},
output: {
path: path.resolve(__dirname,'dist'),
publishPath: 'dist/',
filename: '[name].js'
},
plugin: [
new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]按照上述配置，在构建生成文件时，dist目录下将会增加jq.js、vendors.js和redom.js这三个JS文件。
以上步骤解决了将多个模块打包成多个独立包的需求。
如果希望将打包好的JS文件存放在指定的子目录中，该如何操作呢？
接下来具体实现这一功能，其核心区别主要在于entry入口函数的路径配置。
entry: {
'./common/main': path.resolve(__dirname,'src/index.js'),
'./jquery/jq': ['jquery'],
'./react/react': ['react'],
'./reactdom/redom': ['react-dom']
},如上所示配置后，四个JS文件将分别存放至我们指定的dist目录下的四个子文件夹中。
需要注意的是，此时不再需要用到webpack.optimize.CommonsChunkPlugin插件。
最后，附上完整的webpack.config.js配置文件代码供参考。
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
'./common/main': path.resolve(__dirname,'src/index.js'),
'./jquery/jq': ['jquery'],
'./react/react': ['react'],
'./reactdom/redom': ['react-dom']
},
output: {
path: path.resolve(__dirname,'dist'),
publishPath: 'dist/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style!css!sass'
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
loader: 'babel'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url?limit=40000'
}
]
},
babel: {
presets: ['es2015','stage-0','react'],
plugins: ['transform-runtime',["antd",{"style": "css"}]]
},
resolve: ['js','jsx','css'],
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
// new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
// new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
// new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]
};以上关于webpack打包并将文件加载到指定位置的方法就是全部内容，希望能对大家有所帮助。
怎么在线格式化压缩JS代码并保留原始注释
2026-11-05 09:15:34
生产环境怎么自动移除JS控制台打印日志
2026-11-05 09:07:54
Babel 配置 core-js 完整指南：@babel/preset-env 与 useBuiltIns 设置
2026-11-04 20:32:23
Rollup打包集成Terser进行JS压缩的配置方法
2026-11-03 11:58:27
core-js v3 安装配置：配合 @babel/preset-env 实现按需引入
2026-11-03 11:11:05