我正在尝试在react应用程序中设置webpack配置。添加webpack配置的目的是为了避免缓存构建文件。
用于开发监视模式和生产最小化构建。
下面是webpack.config.ts
const path = require('path');
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.ts',
path: path.resolve(__dirname, 'dist'),
},
};
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"@types/enzyme": "^3.10.8",
"@types/file-saver": "^2.0.2",
"@types/jest": "^26.0.15",
"@types/lodash": "^4.14.165",
"@types/node": "^12.19.4",
"@types/react-alert": "^5.2.0",
"@types/react-dom": "^16.9.9",
"@types/react-modal": "^3.10.6",
"@types/react-redux": "^7.1.11",
"@types/react-router-dom": "^5.1.6",
"@types/react-select": "^3.0.27",
"@types/react-table": "^7.0.25",
"@types/react-test-renderer": "^17.0.0",
"@types/redux-mock-store": "^1.0.2",
"@types/styled-components": "^5.1.4",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"enzyme": "^3.11.0",
"file-saver": "^2.0.5",
"keycloak-js": "^11.0.3",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-alert": "^7.0.2",
"react-alert-template-basic": "^1.0.0",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-dropzone": "^11.3.2",
"react-hook-form": "^6.13.1",
"react-modal": "^3.12.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-select": "^3.1.1",
"react-table": "^7.6.2",
"react-test-renderer": "^17.0.1",
"react-toastify": "^6.2.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"serve": "^12.0.0",
"styled-components": "^5.2.1",
"styled-icons": "^10.22.0",
"ts-jest": "^26.4.4",
"typescript": "^4.4.4",
"wait-for-expect": "^3.0.2",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"develop": "webpack-dev-server --mode production"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react": "^17.0.3",
"@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^5.4.0",
"husky": "^4.3.0",
"jest-teamcity-reporter": "^0.9.0",
"lint-staged": "^10.5.1",
"prettier": "2.1.2",
"ts-loader": "^9.2.6",
"ts-node": "^10.3.0",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.1"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,css,md,ts,tsx}": "prettier --write"
}
}
运行npm run develop后，我得到以下错误
frontend@0.1.0 develop/c/Users/ui/projectWebpack-dev-server——mode production
[webpack-cli]加载'/c/Users/ui/project/webpack.config '失败。ts的配置webpack-cli webpack.config。ts:1:1 -错误TS1208: 'webpack.config. config. '不能在"——isolatedModules"下编译，因为它被认为是一个全局脚本文件。添加import、export或空的"export{}"语句，使其成为一个模块。
创建react项目:
yarn create react-app <project-name> --template typescript
构建:
yarn build
你不需要设置webpack。