我的网站包构建有2个条目 vendor.js => vendor.js 文件和 index.js => bundle.js
显然,vendor.js是所有第三方库所在的文件,而index.js是我的代码。
我遇到了一些问题,我包含的许多第三方库(在vendor.js中)都没有从 bundle.js 执行。那是为什么?
我的网络包配置:
import path from 'path';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
bundle: './dev/index.js',
vendor: './dev/vendor.js'
},
output: {
path: path.join(__dirname, 'dist'),
// publicPath: 'http://localhost:3000/',
filename: '[name].[hash].js',
chunkFilename: '[id].bundle.js'
},
externals: [
{
"./dev/assets/Paraxify/paraxify.js": "paraxify",
}
],
module: {
loaders: [
{
test: /\.js$/,
// exclude: path.resolve(__dirname, "node_modules"),
loader: 'babel-loader',
// exclude: [
// path.resolve(__dirname, "node_modules"),
// ],
query: {
compact: true,
plugins: ["transform-es2015-modules-commonjs"],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!postcss-loader!sass")
},
// { test: /jquery/, loader: 'expose?$!expose?jQuery' },
{ test: /\.jpg$/, loader: "file-loader?name=./assets/imgs/[name].jpg" },
{ test: /\.png$/, loader: "file-loader?name=./assets/imgs/[name].png" },
{ test: /\.(gif|woff|woff2|eot|ttf|svg)$/, loader: "url-loader" },
// { test: /\grabbing.gif$/, loader: "url-loader" },
// { test: /\preloader.gif$/, loader: "url-loader" },
// { test: /\default-skin.svg$/, loader: "url-loader" },
// { test: /\/default-skin.png$/, loader: "url-loader" }
// { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins: [
new CopyWebpackPlugin([
{ from: './dev/assets', to: 'assets' }
]),
new CopyWebpackPlugin([
{ from: './dev/bootstrap3', to: 'bootstrap3' }
]),
new webpack.optimize.CommonsChunkPlugin({
name: ['bundle', 'vendor']
}),
new HtmlWebpackPlugin({
hash: false,
template: 'ejs!./dev/index.html',
inject: 'body'
}),
new ExtractTextPlugin("styles.[hash].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
// new webpack.ProvidePlugin({
// twentytwenty: "frontend/dev/assets/twentytwenty/js/jquery.twentytwenty"
// })
]
};
问题示例:
Vendor.js:导入Scrollreveal(https://scrollrevealjs.org/)
import $ from 'jquery';
// import 'eqcss';
// import Rx from 'rx';
import * as ScrollReveal from 'scrollreveal';
当我执行:window.sr = ScrollReveal({ reset: true });
以使变量全局可用时,我在浏览器的控制台中收到错误:Uncaught TypeError: ScrollReveal is not a function
有人可以解释我的错误吗?感谢