React Typescript로 Webpack npm 실행 빌드
20514 단어 reduxtypescriptwebpackreact
Module parse failed: Unexpected token
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const container = document.getElementById('root');
| const root = createRoot(container);
> root.render(<Provider store={store}>
| <App />
| </Provider>);
webpack 5.73.0 compiled with 1 error in 4284 ms
tsconfig.json이 React를 읽지 않았습니다. webpack 및 tsconfig를 설정한 후에도 여전히 누락되었습니다. tsconfig 파일에 2줄의 코드가 있는 것 같습니다.
"jsx": "react-jsx"
그리고 이것은 웹팩에서
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: { allowTsInNodeModules: true }
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"baseUrl": "./",
"outDir": "./build",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"suppressImplicitAnyIndexErrors": true,
"importHelpers": true,
"noImplicitAny": true,
"removeComments": true,
"module": "es6",
"preserveConstEnums": true,
"jsx": "react-jsx"
},
"include": ["src/**/*"],
"exclude": ["build", "scripts"]
}
오류가 수정되었습니다. 여전히 webpack을 최적화해야 하고 devtool이 빌드 프로세스를 죽이고 있으므로 제거해야 했습니다.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
// watch: true,
mode: "production",
entry: "./src/index.tsx",
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'build')
},
optimization: {
chunkIds: 'named',
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
},
}),
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html'), // template file
filename: 'index.html', // output file
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', "@babel/preset-react"]
}
}
},
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer', {
overrideBrowserslist: ['last 3 versions', 'ie >9']
},
],
],
},
},
},
],
},
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"autoprefixer",
{
overrideBrowserslist: ['last 3 versions', 'ie >9']
},
],
],
},
},
},
'sass-loader'
],
},
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: ['file-loader']
},
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: { allowTsInNodeModules: true }
}
]
},
resolve: {
extensions: ["*",".ts", ".tsx", ".js", "jsx"]
},
}
Reference
이 문제에 관하여(React Typescript로 Webpack npm 실행 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kukovisuals/webpack-npm-run-build-with-react-typescript-1ek4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)