我首先要说我是一个webpack菜鸟,所以对您的帮助非常感谢。
所以
我对Js捆绑包的布局是我们有两个捆绑包:
bundle.js
tablesbundle.js
bundle.js包含我们所有页面的标准javascript。 tablebundle.js包含datatables.net库。
现在在我们的旧项目中,我们使用的是webpack 2.1.0,我们要做的就是在布局文件上引用bundle.js,在任何需要使用datatables.net的页面上引用tablebundle.js,然后在我们的bundle.js任何调用创建数据表的页面都可以正常工作。
但是,在移至webpack 4.12.0之后,此方法不再起作用,它无法使用在tablebundle.js中找到的datatables初始化程序方法,tablebundle.js中唯一的代码是:
require("datatables.net");
现在,如果我将该行移动到bundle.js中,则可以正常工作,但我们不希望每个页面上都有数据表,看来我们的捆绑js文件无法跨捆绑通信,但是它们在以前的版本中可以通信。
如果有人可以解释或提供帮助,那就太好了。
-配置文件-
module.exports = {
entry: {
bundle: "./Scripts/index.js",
libraries: './Scripts/libraries.js',
datatablesbundle: "./Scripts/tablesBundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.sass$|\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {},
},
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' },
],
},
{
test: /\.(jpg|png)$/,
use: 'file-loader?name=[path][name].[hash].[ext]'
}
],
},
plugins: getPlugins(),
output: {
path: BUILD_DIR,
filename: '[name].js'
},
//optimization: {
// splitChunks: {
// chunks: 'all'
// }
//},
resolve: {
modules: ["web_modules", "node_modules"],
alias: {
jquery: "jquery/src/jquery",
'picker': 'pickadate/lib/picker'
}
}
}
function getPlugins() {
var isProd = (process.env.NODE_ENV === 'production');
var plugins =
[
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new webpack.ProvidePlugin({
"window.$": "jquery",
$: "jquery",
jQuery: "jquery",
Popper: "popper.js"
})
];
if (isProd) {
plugins.push(
new UglifyJSPlugin({
output: {
comments: false,
beautify: true,
sourceMap: true
}
}));
plugins.push(
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.(css|scss|sass)$/,
cssProcessorOptions: { discardComments: { removeAll: true } }
}));
}
return plugins;
}