const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const CleanWebpackPlugin = require("clean-webpack-plugin"); // dist
const HtmlWebpackPlugin = require("html-webpack-plugin"); // html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
function buildEntriesAndHTML() {
// entry
const result = glob.sync("**/animate.js");
/*const config = {
hash: true,
inject: true
};*/
const entries = {};
const htmls = [];
result.forEach(item => {
const one = path.parse(item);
const outputfile = one.dir.split("/").slice(-1)[0];
entries[outputfile] = "./" + item;
htmls.push(
new HtmlWebpackPlugin({
// ...config,
template: "./" + one.dir + "/"+outputfile+".html",
// filename: outputfile === "index" ? "./index.html" : "./" + outputfile + "/index.html", // html
filename: "./" + one.dir + "/"+outputfile+".html",
chunks: [outputfile],
inlineSource: ".(js|css)$"
})
);
});
// htmls.push();
return {
entries,
htmls
};
}
const final = buildEntriesAndHTML();
module.exports = {
entry: final.entries,
output: { //
path: __dirname+"/dist",
// publicPath: __dirname+"/build/",
filename: "[name]/[name].js", //
// publicPath:"/build/dsp/dsp-static-test/"
},
devtool: "inline-source-map",
module: {
rules: [
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
"css-loader",
{loader: "postcss-loader",options:{plugins:[require("autoprefixer")("last 100 versions")]}}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader: "url-loader",
options: {
limit: 8192,
name: "image/[name].[hash:7].[ext]"
}
},
{
loader: "image-webpack-loader",//
options: {
bypassOnDebug: true,
}
}
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: "file-loader",
options: {
name: "image/[name].[hash:7].[ext]"
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {minimize: true} //
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(["build"]),
new MiniCssExtractPlugin({
filename: "[name]/[name].css",
chunkFilename: "[name].css"
}),
...final.htmls,
new UglifyJSPlugin({
uglifyOptions: {
warnings: false,
parse: {},
mangle: true, // Note `mangle.properties` is `false` by default.
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
output: {
comments: false,
beautify: false,
},
compress: true,
}
/*compress: {
// UglifyJs
warnings: false,
exclude:["/node_modules/"],
// `console` ie
drop_console: true,
//
collapse_vars: true,
//
reduce_vars: true
},
output: {
//
beautify: false,
//
comments: false
}*/
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css\.*(?!.*map)/g, // /\.css$/g
cssProcessor: require("cssnano"),
cssProcessorOptions: {
discardComments: { removeAll: true },
// cssnano z-index
safe: true,
// cssnano autoprefixer
// autoprefixer
// autoprefixer
// postcssautoprefixer
autoprefixer: false
},
canPrint: true
}),
new HtmlWebpackInlineSourcePlugin()
],
resolve: {
extensions: [".js", ".json", ".jsx", ".css"]
},
}
the error report is shown in the figure above. Which god can take a look at it? I"m really in a hurry!