Javascript 网页中的多条目
我正在尝试创建一个捆绑包,但我需要在加载“供应商”文件夹之前加载一些.js。 结构如下:Javascript 网页中的多条目,javascript,webpack,Javascript,Webpack,我正在尝试创建一个捆绑包,但我需要在加载“供应商”文件夹之前加载一些.js。 结构如下: -> assets ->js ->controller ->services ->directives ->vendor app.js 当我创建包时,它将app.js放在第一位,但我需要“vendor”文件夹的.js放在第一位 const webpack = requi
-> assets
->js
->controller
->services
->directives
->vendor
app.js
当我创建包时,它将app.js放在第一位,但我需要“vendor”文件夹的.js放在第一位
const webpack = require('webpack')
const path = require('path')
module.exports = {
mode: "development",
entry: {
main:[path.resolve(__dirname, 'assets/js/vendor/jquery.min.js'),
path.resolve(__dirname, 'assets/js/vendor/sha256.min.js'),
path.resolve(__dirname, 'assets/js/vendor/bootstrap.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular.js'),
path.resolve(__dirname, 'assets/js/vendor/smoothscroll.min.js'),
path.resolve(__dirname, 'assets/js/vendor/jquery.mask.min.js'),
path.resolve(__dirname, 'assets/js/vendor/cpf.min.js'),
path.resolve(__dirname, 'assets/js/vendor/clipboard.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-animate.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-cookies.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-locale_pt-br.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-ui-router.min.js'),
path.resolve(__dirname, 'assets/js/vendor/bootstrap-angular-validation-all.min.js'),
path.resolve(__dirname, 'assets/js/vendor/loading-bar.min.js'),
path.resolve(__dirname, 'assets/js/vendor/nya-bs/nya-bs-select.js'),
path.resolve(__dirname, 'assets/js/vendor/slick/slick.min.js'),
path.resolve(__dirname, 'assets/js/vendor/ngCpfCnpj.js'),
path.resolve(__dirname, 'assets/js/vendor/match-media.js'),
path.resolve(__dirname, 'assets/js/app.js'),
path.resolve(__dirname, 'assets/js/services/message.js'),
path.resolve(__dirname, 'assets/js/services/settings.js'),
path.resolve(__dirname, 'assets/js/services/urlRedeSocial.js'),
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'temp/builder'),
}
}
我可能错了,但我想你要找的是:
entry: {
app: [
path.resolve(__dirname, 'assets/js/app.js'),
path.resolve(__dirname, 'assets/js/services/message.js'),
path.resolve(__dirname, 'assets/js/services/settings.js'),
path.resolve(__dirname, 'assets/js/services/urlRedeSocial.js'),
],
vendor: [
path.resolve(__dirname, 'assets/js/vendor/jquery.min.js'),
path.resolve(__dirname, 'assets/js/vendor/sha256.min.js'),
path.resolve(__dirname, 'assets/js/vendor/bootstrap.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular.js'),
path.resolve(__dirname, 'assets/js/vendor/smoothscroll.min.js'),
path.resolve(__dirname, 'assets/js/vendor/jquery.mask.min.js'),
path.resolve(__dirname, 'assets/js/vendor/cpf.min.js'),
path.resolve(__dirname, 'assets/js/vendor/clipboard.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-animate.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-cookies.min.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-locale_pt-br.js'),
path.resolve(__dirname, 'assets/js/vendor/angular-ui-router.min.js'),
path.resolve(__dirname, 'assets/js/vendor/bootstrap-angular-validation-all.min.js'),
path.resolve(__dirname, 'assets/js/vendor/loading-bar.min.js'),
path.resolve(__dirname, 'assets/js/vendor/nya-bs/nya-bs-select.js'),
path.resolve(__dirname, 'assets/js/vendor/slick/slick.min.js'),
path.resolve(__dirname, 'assets/js/vendor/ngCpfCnpj.js'),
path.resolve(__dirname, 'assets/js/vendor/match-media.js')
]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'temp/builder'),
}
这将产生两个单独的包app.bundle.js
和vendor.bundle.js
。然后,如果您使用的是HtmlWebpackPlugin
,则可以执行类似的操作来控制顺序:
new HtmlWebpackPlugin({
chunks: ['vendor', 'app'],
chunksSortMode: 'manual'
})