Javascript 块分割中的自定义模块目录不';不能在网页包中工作
我正在使用webpack构建一个项目,我希望使用以下配置删除重复的custom materialize.js库:Javascript 块分割中的自定义模块目录不';不能在网页包中工作,javascript,jquery,webpack,materialize,Javascript,Jquery,Webpack,Materialize,我正在使用webpack构建一个项目,我希望使用以下配置删除重复的custom materialize.js库: const path = require('path'); const webpack = require('webpack'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bundl
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
frontend: './src/AppBundle/Resources/js/Frontend/frontend.js',
panel: ['./src/AppBundle/Resources/js/Panel/forms.js', './src/AppBundle/Resources/js/Panel/vue/main.js']
},
output: {
filename: '[name].min.js',
path: path.join(__dirname, 'web/js')
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules|src\/AppBundle\/Resources\/js\/Vendor/,
name: 'vendor',
chunks: 'all'
}
}
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
resolve: {
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.$': 'jquery',
'window.jQuery': 'jquery'
}),
new VueLoaderPlugin(),
new BundleAnalyzerPlugin()
]
};
因此,我想得到三个文件:前端、面板和供应商(这个文件包含vue.js、jquery.js和materialize.js)
以下是我的源文件夹结构:
Frontend
|_frontend.js
Panel
|_forms.js
|_vue
|_(...).js
Vendor
|_materialize.js
在frontend.js和forms.js中,我添加了jQuery:
window.$ = window.jQuery = require('jquery');
因为jQuery取自节点_模块,所以它是使用vendor.js中的optimization.splitChunks追加的
不幸的是,我需要定制materialize.js文件(已修改,而不是node_模块中的form package),因此我将其应用于optimization.splitChunks中,并将其添加到前两个文件中:
require('../Vendor/materialize');
它工作正常,只是在frontend.js和panel.js中附加了两次,而不是在vendor.js中。我希望它只出现在vendor.js中
BundleAnalyzerPlugin显示如下输出:
我想,我可以添加materialize.js作为供应商入口点(并从前两个文件中删除require('../vendor/materialize')
),但不幸的是,它不起作用,即找不到materialize函数,例如:
...
Uncaught TypeError: $(...).pickadate is not a function
...
在html中,我有一个接一个的脚本:
<script type="text/javascript" src="/js/vendor.min.js"></script>
<script type="text/javascript" src="/js/frontend.min.js"></script>
没有webpack,它本来可以正常工作,但现在我不知道如何使它正常工作?我已经解决了它。问题在于正则表达式。SplitChunksPlugin未解决此问题:
test: /node_modules|src\/AppBundle\/Resources\/js\/Vendor/,
如果有两个区块目录,最好的解决方法是为每个目录分别创建两个单独的缓存组,并利用以下功能:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: path.resolve('node_modules'),
name: 'vendor',
chunks: 'all'
},
materialize: {
test: path.resolve('src/AppBundle/Resources/js/Vendor'),
name: 'vendor',
chunks: 'all'
}
}
}
},
最终输出: