Node.js 已存在带有Webpack Webpack.config.ts文件的React Typescript,mkdir
我正在尝试为React with Typescript创建一个模板 为了在高效的环境中使用它,我想将它与一个网页包捆绑在一起 就我的研究而言,我应该正确配置一切 如下 webpack.config.tsNode.js 已存在带有Webpack Webpack.config.ts文件的React Typescript,mkdir,node.js,reactjs,typescript,webpack,Node.js,Reactjs,Typescript,Webpack,我正在尝试为React with Typescript创建一个模板 为了在高效的环境中使用它,我想将它与一个网页包捆绑在一起 就我的研究而言,我应该正确配置一切 如下 webpack.config.ts const path = require('path'); module.exports = { mode: "development", entry: { app: path.join(__dirname, 'src', 'index.ts
const path = require('path');
module.exports = {
mode: "development",
entry: {
app: path.join(__dirname, 'src', 'index.tsx')
},
target: 'web',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [
path.resolve(__dirname, 'ts')
],
},
{
enforce: "pre",
test: "/\.js$/",
loader: "source-map-loader"
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'index.js',
path: path.resolve(__filename, 'js')
},
devtool: 'source-map',
};
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"outDir": "./js/",
"preserveConstEnums": true,
"moduleResolution": "Node",
"sourceMap": true,
"removeComments": true,
"jsx": "react"
},
"include": [
"./ts/**/*"
]
}
package.json
{
"name": "reacttest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^14.0.14",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"html-webpack-plugin": "^4.3.0",
"source-map-loader": "^1.0.0",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
但每次我跑
webpack
或
或
我收到以下错误消息
错误:EEXIST:文件已存在,mkdir'\Some\Path\WebWorkspace\reactest\webpack.config.ts'
我做错了什么
两者都试过了
nodejs13.7
及
nodejsv12.18.1
提前感谢问题的根本原因是使用了.ts作为webpack.config文件的扩展名 tsconfig.json文件指示Web包将所有.ts文件包含在处理范围内。这无意中还包括webpack.config.ts文件 将webpack.config.ts文件重命名为webpack.config.js可以解决此问题 以下是在Typescript中实现React JS项目所需的所有文件的工作示例: 1。项目的文件夹结构
react-ui
react-ui/package.json
react-ui/tsconfig.json
react-ui/webpack.config.json
react-ui/src
react-ui/src/index.tsx ---> Main program
react-ui/www ---> For static html file and images
react-ui/www/index.html
react-ui/www/images
2。package.json(包括网页包、网页包cli和网页包开发服务器)
3。tsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
"target": "es5",
"module": "es6",
"jsx": "react",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true
}
}
4。webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'none',
entry: {
app: path.join(__dirname, 'src', 'index.tsx')
},
target: 'web',
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({ filename: '[name].css' }),
new HtmlWebpackPlugin({ template: path.join(__dirname, 'www', 'index.html') }),
new CopyPlugin({ patterns: [{ from: 'www/images', to: 'www/images' }] })
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: '/node_modules/'
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(svg|png|jpg|gif|eot|ttf|woff|woff2)$/,
use: ["file-loader"]
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
}
}
如何使用?
启动开发服务器:
> npm start ---> Starts dev server at port # 3000
生产建设:
> npm run build --> Creates production ready package in react-ui/dist folder
发现错误:
取代:
path: path.resolve(__filename, 'js')
与:
嗨,谢谢你的快速回复。但不幸的是,这并不能解决这个问题。我尝试将文件名更改为ts,但每次尝试构建时都会出现相同的错误。无论我如何称呼它,错误始终是:错误:EEXIST:文件已存在,mkdir'\Some\Path\WebWorkspace\reactest\whateverNameIUse'
> npm start ---> Starts dev server at port # 3000
> npm run build --> Creates production ready package in react-ui/dist folder
path: path.resolve(__filename, 'js')
path: path.resolve(__dirname, 'js')