最近我不得不使用 typescript/webpack 在 react 中创建一个新项目。我已经包含了依赖于 chalk (1.1.3) 的包“sass-loader”。
当我尝试 npm start 时,控制台显示此错误:
Uncaught ReferenceError: process is not defined
at Object../node_modules/chalk/index.js (main.js:62661)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/@babel/highlight/lib/index.js (main.js:403)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/@babel/code-frame/lib/index.js (main.js:19)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/parse-json/index.js (main.js:120631)
我不知道这是否是这个包的问题,或者是我的 webpack 配置......我是 webpack 的新手。
这是我的 webpack 配置:
{
mode: "development",
output: {
publicPath: "/",
},
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
modules: {
localIdentName: 'styles_[local]_[hash:base64:5]'
}
},
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
modules: {
localIdentName: 'styles_[local]_[hash:base64:5]'
}
},
}
],
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx"],
alias: {
'@': '/src',
},
},
plugins: [
new Dotenv(),
new HtmlWebpackPlugin({
template: "public/index.html",
}),
new webpack.HotModuleReplacementPlugin(),
new ForkTsCheckerWebpackPlugin({
async: false,
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
})
],
devtool: "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "build"),
historyApiFallback: true,
port: 4000,
open: false,
hot: true,
stats: 'errors-only'
},
}
提前致谢。