目前我正在建设一个webpack
的小项目,只要我尝试制作装载机,一切顺利。
在loader.js
文件中捆绑webpack后,我的window.onload
事件仅在首页加载后触发,这肯定是缓存问题,但我无法弄清楚如何禁用/删除/修复这一点。
这里是我的设置:
webpack.prod.config.js
{
entry: {
home: "./assets/js/app/home.js",
service: "./assets/js/app/service.js",
contacts: "./assets/js/app/contacts.js"
},
output: {
path: path.join(__dirname, "build/js"),
publicPath: "/build/js",
filename: "[name].bundle.min.js"
},
resolve: {
alias: {
"jquery": cfg.vendors + "/jquery.min",
"jquery-validation": cfg.vendors + "/jquery.validate",
"google-maps": cfg.vendors + "/Google.min.js"
},
extensions: ["", ".js", ".es6"]
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new CopyWebpackPlugin([
{ from: node_path + "/jquery/dist/jquery.min.js", to: cfg.vendors },
{ from: node_path + "/jquery-validation/dist/jquery.validate.js", to: cfg.vendors },
{ from: node_path + "/google-maps/lib/Google.min.js", to: cfg.vendors }
])
]
}
home.js
"use strict";
import $ from "jquery";
import Loader from "../utils/loader";
import ScrollTop from "../utils/scrollTop";
$(() => {
new Loader();
new ScrollTop();
});
loader.js
const LOAD_TIME = 3000;
let loaderHolder = $("#loader-holder"),
body = $("body");
class Loader{
constructor(){
this._events();
}
_events(){
$(window).on("load", (e) => { this._handleLoad(e) });
}
_handleLoad(e){
setTimeout(() => {
loaderHolder.addClass("loaded");
body.addClass("loaded");
}, LOAD_TIME);
return false;
}
}
export default Loader;
捆绑的npm任务:
"prod-build": "set NODE_ENV=production && webpack -p --config webpack.prod.config.js --progress"
任何帮助都将不胜感激。