我想使用es6和“ webpack ”创建具有 UMD 支持的jquery插件，所以我从设计开始，但是在构建之后，我有了一个test.js文件，其中包含我的代码以及其中的所有依赖项。
所以我配置了webpack来创建供应商块。
可复制的回购 https://github.com/kevalbhatt/webpack-issue/tree/master
如果我同时使用两个js运行项目，则有效。即 test.js和vendor.js。
但是如果我尝试在没有 vendor.js 的情况下使用 test.js ，则 test.js 文件未调用。
webpack.config.js
const path = require('path'),
webpack = require('webpack'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
HtmlWebpackPlugin = require("Html-webpack-plugin"),
ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const extractApp = new ExtractTextPlugin('styles/[name].css');
const extractVendor = new ExtractTextPlugin('styles/[name].css');
var ENV = process.env.NODE_ENV,
buildType = process.env.BUILD_TYPE,
isProd = (
ENV === "production" ?
true :
false),
BUILD_DIR = path.resolve(
__dirname, 'dist'),
ROOT_DIR = path.resolve(__dirname),
APP_DIR = path.resolve(__dirname, 'src'),
NODE_MODULES = path.resolve(__dirname, 'node_modules'),
pathsToClean = [BUILD_DIR],
config = {
entry: {
"test": [APP_DIR + "/test.js", APP_DIR + "/vendor.js"],
//"test-vendor": [APP_DIR + "/vendor.js"]
},
output: {
path: (
isProd ?
BUILD_DIR :
ROOT_DIR), //<- This path is use at build time
filename: "[name].min.js", //<- This file is created under path which we specified in output.path
chunkFilename: '[name].min.js',
library: "Test",
libraryTarget: 'umd'
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/, // you may add "vendor.js" here if you want to
name: "test-vendor",
chunks: "initial",
enforce: true
}
}
}
},
// optimization: {
// splitChunks: {
// cacheGroups: {
// vendor: {
// test: /moment-timezone|jquery|select2/,
// name: "test-vendor",
// chunks: "initial",
// enforce: true
// }
// }
// }
// },
plugins: [
new CleanWebpackPlugin(pathsToClean, {
root: ROOT_DIR,
verbose: true
}),
extractApp,
extractVendor,
new HtmlWebpackPlugin({
title: 'test',
template: (APP_DIR) + '/index.ejs',
chunks: ['test-vendor', 'test'],
filename: (
isProd ?
BUILD_DIR :
ROOT_DIR) + '/index.html'
}),
new HtmlWebpackPlugin({
title: 'test-external-vendor',
template: (APP_DIR) + '/index-external-vendor.ejs',
chunks: ['test'],
filename: (
isProd ?
ROOT_DIR + "/example" :
ROOT_DIR) + '/index-external-vendor.html'
}),
new webpack.DefinePlugin({ 'isProd': isProd }),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
moment: "moment-timezone",
select2: 'select2'
})
],
resolve: {
modules: [
APP_DIR, NODE_MODULES
],
extensions: [
'.js',
'.jsx',
'.html',
'.css',
'.scss'
]
},
module: {
rules: [{
test: /\.jsx($|\?)|\.js($|\?)/,
exclude: /node_modules/,
include: [
APP_DIR, ROOT_DIR
],
use: [{
loader: "babel-loader",
query: {
presets: [
"env"
],
plugins: ["transform-decorators-legacy", "transform-flow-strip-types", "transform-class-properties", "transform-object-rest-spread", "add-module-exports"]
}
}]
}, {
test: /\.css$/,
use: extractVendor.extract({
use: [{
loader: "css-loader",
options: {
minimize: isProd,
includePaths: [
NODE_MODULES
]
}
}]
})
},
{
test: /\.scss$/,
use: extractApp.extract({
use: [{
loader: "css-loader",
options: {
minimize: isProd
}
}, {
loader: "sass-loader",
options: {
includePaths: [
APP_DIR + "/styles"
]
}
}]
})
},
{
test: require.resolve('select2'),
use: [{
loader: 'expose-loader',
options: 'select2'
}]
},
{
test: require.resolve('moment'),
use: [{
loader: 'expose-loader',
options: 'moment'
}]
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}, {
loader: 'expose-loader',
options: '$'
}]
}
]
},
devServer: {
port: 9099,
host: "0.0.0.0",
disableHostCheck: true
}
};
if (!isProd) {
config['devtool'] = 'inline-source-map';
config['cache'] = true;
}
module.exports = config;
Test.js
import Plugin from 'utils/Plugin';
import 'styles/style';
export default class Test {
}
console.log("File Called");
Plugin({ pluginName: "testJquery", classRef: Test });
vendor.js
import 'moment-timezone';
import 'jquery';
import 'select2';
import 'select2/dist/css/select2.min';
我想在没有vendo.js示例的情况下运行test.js：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script type="text/javascript" src="../dist/test.min.js"></script>
</body>
如果我使用vendor.js而不是cdn，那么将调用test.js文件。