[英]Custom module directories in chunk splitting doesn't work in Webpack
I am building a project with webpack and I want to remove duplicated custom materialize.js library with the following config: 我正在使用webpack构建项目,并且要使用以下配置删除重复的自定义materialize.js库:
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()
]
};
Thus, I would like to get three files: frontend, panel and vendors (this one with vue.js, jquery.js and materialize.js) 因此,我想获得三个文件:前端,面板和供应商(其中一个包含vue.js,jquery.js和materialize.js)。
Here is my source folder structure: 这是我的源文件夹结构:
Frontend
|_frontend.js
Panel
|_forms.js
|_vue
|_(...).js
Vendor
|_materialize.js
In frontend.js and forms.js I have added jQuery: 在frontend.js和forms.js中,我添加了jQuery:
window.$ = window.jQuery = require('jquery');
Bacause jQuery is taken from node_modules, it is appended using optimization.splitChunks in vendor.js 因为jQuery是从node_modules中获取的,所以它是使用vendor.js中的Optimization.splitChunks附加的
Unfortunately I need to have custom materialize.js file (modified, not form package in node_module), so I applied it in optimization.splitChunks, and add to previous two files as well: 不幸的是,我需要具有自定义的materialize.js文件(已修改,而不是node_module中的表单包),因此我将其应用到了optimization.splitChunks中,并且还添加了前两个文件:
require('../Vendor/materialize');
It works correctry, except it is appended twice in frontend.js and panel.js, not in vendor.js. 它可以正常工作,只是它在frontend.js和panel.js中而不是在vendor.js中附加了两次。 I would to have it just in vendor.js. 我只在vendor.js中有它。
BundleAnalyzerPlugin shows output like this: BundleAnalyzerPlugin显示如下输出:
I thought, I can add materialize.js as the vendor entry point (and get rid of require('../Vendor/materialize')
from previous two files), but unfortunately it doesn't work, ie materialize functions are not found, eg : 我以为可以将materialize.js添加为供应商入口点(并摆脱前两个文件中的require('../Vendor/materialize')
),但不幸的是它不起作用,即找不到物化函数,例如:
...
Uncaught TypeError: $(...).pickadate is not a function
...
In html I have scripts one after another: 在html中,我有一个接一个的脚本:
<script type="text/javascript" src="/js/vendor.min.js"></script>
<script type="text/javascript" src="/js/frontend.min.js"></script>
It was working right without webpack, but now I don't know how to make it to working correctry? 没有webpack,它就可以正常工作,但是现在我不知道该如何使其正常工作?
I've already solved it. 我已经解决了 The problem was with regex. 问题出在正则表达式上。 SplitChunksPlugin did not resolved it: SplitChunksPlugin无法解决它:
test: /node_modules|src\/AppBundle\/Resources\/js\/Vendor/,
In a case of having two directories of chunks, the best way out is to create two separate cache groups respectively for each directory and take advantage of path.resolve function: 在具有两个块目录的情况下,最好的解决方法是分别为每个目录创建两个单独的缓存组并利用path.resolve函数:
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'
}
}
}
},
Final output: 最终输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.