recently, there is a problem with the upgrade of webpack from 2 to 4 in the project. Finally, all the related dependencies have been updated to confirm that they can adapt to version 4.x, but there is an exception when packing. I have been watching it for almost two days, but I still haven"t found the problem.
Code:
entry: of 1.webpack
gp.getEntry = function () {
var isDev = this.isDev()
var entry = {}
var chunks = []
// entry
if (isDev) {
const port = this.getPort()
glob.sync("./src/entry/**/*.js").forEach(path => {
const chunk = path.split("./src/entry/")[1].split(".js")[0]
entry[chunk] = ["babel-polyfill", `webpack-hot-middleware/client?timeout=20000&reload=true`, path]
chunks.push(chunk)
})
} else {
glob.sync("./src/entry/**/*.js").forEach(path => {
const chunk = "src/" + path.split("./src/entry/")[1].split(".js")[0]
entry[chunk] = ["babel-polyfill", path]
chunks.push(chunk)
})
}
this.entry = entry
this.chunks = chunks
}
output: of 2.webpack
gp.getOutput = function () {
// entryoutput
const publicPath = this._userConfig.static.srcHost
const path = resolve(this.root_path, "./dist")
var res = {
path,
filename: "[name].js",
chunkFilename: "[name].[chunkHash:7].js",
publicPath
}
this.output = res
}
module of 3.webpack (this feeling is not important and can be roughly skipped):
gp.getModule = function () {
var res = {
rules: [
{
enforce: "pre",
test: /\.vue$/,
loader: "eslint-loader",
exclude: /node_modules/
},
{
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
loaders: {
"scss": [
"css-loader",
"sass-loader"
]
}
}
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [["es2015", { "modules": false }]]
}
},
{
loader: "eslint-loader",
options: {
query: {
cacheDirectory: true
}
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
fallback: "style-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{
test: /\.stylus/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "stylus-loader"
}],
fallback: "style-loader"
})
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
root: resolve(__dirname, "src"),
attrs: ["img:src", "link:href"]
}
}]
},
{
test: /\.ejs/,
use: [{
loader: "ejs-loader",
options: {
root: resolve(__dirname, "src"),
attrs: ["img:src", "link:href"]
}
}]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
exclude: /favicon\.png$/,
use: [{
loader: "url-loader",
options: {
limit: 10000
}
}]
}
]
}
this.module = res
}
plugin: of 4.webpack
gp.getPlugins = function () {
var chunks = this.chunks
var isDev = this.isDev()
var res = [
new webpack.optimize.SplitChunksPlugin({
// webpack4
chunks: "initial", // : "initial" | "all"(all) | "async"
minSize: 0, // 0
minChunks: 1, // chunk 1
maxAsyncRequests: 5, // 1
maxInitialRequests : 3, // 1
name: function(){}, // function
cacheGroups:{ // chunks
priority: 0, //
vendor: { // key entry
chunks: "initial", // : "initial" | "all" | "async"()
test: /node_modules/, // chunk
name: "vendors", // chunk
filename: "assets/js/vendors.js",
enforce: true,
reuseExistingChunk: true // chunk
}
}
}),
new ExtractTextPlugin({
filename: "assets/css/[name].css",
allChunks: false,
disable: isDev
}),
new webpack.DefinePlugin({
"appConfig": JSON.stringify(getAppConfig()[this.opts["NODE_ENV"]]),
"window.appConfig": JSON.stringify(getAppConfig()[this.opts["NODE_ENV"]]),
"process.env": {
NODE_ENV: isDev ? ""development"" : ""production""
}
}),
new CopyWebpackPlugin([{
from: "./src/utils/ie-test.js",
to: "."
}])
]
// HtmlWebpackPlugin
glob.sync("./src/entry/**/*.ejs").forEach(path => {
const filename = path.split("./src/entry/")[1].split("/app.ejs")[0] + ".html"
let chunk = path.split("./src/entry/")[1].split(".ejs")[0]
chunk = this.isDev() ? chunk : ("src/" + chunk)
const htmlConf = {
filename: filename,
template: path,
inject: "body",
favicon: "./src/assets/img/favicon.ico",
hash: !isDev,
isProd: this.isProd(),
showErrors: true,
iconfontUrl: "//at.alicdn.com/t/font_670822_9wmnctcouh9.css"
}
res.push(new HtmlWebpackPlugin(htmlConf))
})
this.plugins = res
}
part of the script code of 5.package.json:
"scripts": {
"dev": "node --harmony ./webpack/server.js"
}
this project has four entrances and generates four exits accordingly. Now the terminal will report
after run dev. Entrypoint undefined = customer_index1.html
Entrypoint undefined = customer_index2.html
Entrypoint undefined = customer_index3.html
Entrypoint undefined = customer_index4.html```
localhost<div id="app"></div>