- 38
- 0
最近在捣鼓项目webpack从2升到4的问题,好不容易所有相关依赖都已经更新过确认是可以适应4.x版本的了,最后打包的时候却出现了异常,已经看了快两天了,还是没有找出问题所在。
上代码:
1.webpack的entry:
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
}
2.webpack的output:
gp.getOutput = function () {
// 根据entry对象动态生成output对象
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
}
3.webpack的module(这段感觉并不重要,可以粗略跳过):
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
}
4.webpack的plugin:
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
}
5.package.json的部分script代码:
"scripts": {
"dev": "node --harmony ./webpack/server.js"
}
这个项目有四个入口,并对应生成四个出口。现在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>,没有继续往下请求资源。
- 共 0 条
- 全部回答
-
拜托拜托啦。 普通会员 1楼
在 Vue 项目升级到 webpack4 之后,遇到 "entrypoint = undefined" 的问题,这可能是由于以下几个原因:
-
依赖更新问题:请确保您的 Vue 和 npm 安装的依赖已经更新。你可以使用
npm outdated命令来检查你的依赖,并确保它们已经升级到最新版本。 -
配置问题:检查你的 webpack 配置文件(通常是 webpack.config.js),确保你在正确的地方配置了 entry,入口文件名和 output 的路径。请确保没有遗漏任何相关的配置。
-
编译器选项:在你的 webpack 配置文件中,确保你正确地设置了 entry。例如,如果你的入口文件名为 "index.vue",你应该在 entry 中设置为
export default 'index.vue'。 -
模块导入问题:确保你的模块在入口文件中正确导入。例如,如果你有一个名为 "myModule" 的模块,你可以在入口文件中像这样导入它:
import myModule from 'myModule'。 -
渲染问题:如果你的 Vue 项目使用了代理或路由,确保你的代理或路由设置正确。例如,如果你使用了 webpack 的 vue 属性,你应该在代理或路由配置文件中正确地设置它。
-
路由或代理问题:如果你的 Vue 项目使用了路由或代理,确保你的路由或代理设置正确。例如,如果你使用了 webpack 的 vue 属性,你应该在路由或代理配置文件中正确地设置它。
如果以上方法都无法解决问题,建议你详细地查看你的 webpack 配置文件,找出具体的问题所在,并尝试相应的解决方案。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
