问题一详情:configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.BREAKING CHANGE since webpack 5: The devtool option is more strict.
翻译过来的意思:
configuration.devtool配置应该符合 “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”
自 webpack 5 以来的重大更改:devtool 选项更加严格。
就是要把webpack devtool配置换成规定的
可以参考官方文档:https://webpack.js.org/configuration/devtool/
我是在学习阶段,是用于开发,在下面有相关推荐
翻译一下:
虽然他写了这些都可以,但是我最开始写的cheap-module-eval-source-map报错,而且根据错误信息,要符合正则表达式"^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$",
cheap-module-eval-source-map中的eval位置不符合规范,根据正则表达式eval-cheap-module-source-map才符合规范
还有一些其他的也符合,例如eval-cheap-source-map,不同的选项效果不同,运行npm run build产生的文件也不同
我是这样写的,
devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',
//在生产环境下使用cheap-module-source-map,很多人写了false,官方说可以为none,不知道false是不是none;在开发环境下使用eval-cheap-source-map
isProd在最上方用于判断是否是生产环境
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
最下面有完整的配置
问题二详情options has an unknown property ‘stats’. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
原因:版本5以后devServer下面好像没有stats属性了,好像被提到了外层(只是我的猜测,我也没见过以前的版本文档)可以参考官方文档
https://webpack.js.org/configuration/stats/
所以把stats提到外边就能运行,如下:
stats: 'errors-only', // 打包日志输出输出错误信息/
devServer: {//启动后
host: 'localhost', // 主机名
port: 8081,
open: true//浏览器自动打开
},
以下是我的具体配置:
目录结构:
webpack.config.js文章来源:https://www.toymoban.com/news/detail-612106.html
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
function resolve (dir) {
return path.resolve(__dirname, '..', dir)
}
module.exports = {
// devtool:isProd ? false : 'eval-cheap-module-source-map',
mode: isProd ? 'production' : 'development', //开发模式:生产模式/开发模式
entry: {
app: './src/main.ts' //程序的主入口目录./src 主入口文件main.ts
},
output: {
path: resolve('dist'), //把我们打包后的文件放在 dist 目录里面
filename: '[name].[contenthash:8].js' //包括产生的js文件 app.八位hash值.js
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')] //主要针对src目录中的ts、tsx文件进行编译处理操作
}
]
},
plugins: [
new CleanWebpackPlugin({
}),//会把我们dist目录中以前打包的js清理掉
new HtmlWebpackPlugin({
template: './public/index.html'
})//针对当前public目录中的html进行打包
],
resolve: {
extensions: ['.ts', '.tsx', '.js']
},//对.ts,.tsx,.js的扩展名进行处理,就是引入什么文件,不用写他的扩展名
devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',//哪一行代码出现错误的提示信息
// devtool: 'cheap-module-eval-source-map',//哪一行代码出现错误的提示信息
// devtool: 'hidden-source-map',//哪一行代码出现错误的提示信息
stats: 'errors-only', // 打包日志输出输出错误信息/
devServer: {//启动后
host: 'localhost', // 主机名
port: 8081,
open: true//浏览器自动打开
},
}
package.json文章来源地址https://www.toymoban.com/news/detail-612106.html
{
"name": "06_webpack_ts",
"version": "1.0.0",
"description": "", //自动生成的一堆,不过有些人好像没有生成什么东西,就是 “”
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//在windows下和linux下可以识别的指令不同,这里可以让项目在两个系统下都能正常运行
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0.3",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.4.2",
"typescript": "^5.0.4",
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.2"
}
}
到了这里,关于【[TOC]([webpack-cli] Invalid configuration object. Webpack has been initialized using a configurati】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!