Skip to content

Instantly share code, notes, and snippets.

@DearVikki

DearVikki/index.html

Created February 20, 2020 14:28
Show Gist options
  • Save DearVikki/9078fd7c9ba9b9e2a741bc0359bd5e2e to your computer and use it in GitHub Desktop.
Save DearVikki/9078fd7c9ba9b9e2a741bc0359bd5e2e to your computer and use it in GitHub Desktop.
Download ZIP
react typescript webpack init
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="container"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
Raw
install packages
yarn add webpack webpack-dev-server react react-dom
yarn add webpack-cli typescript ts-loader @types/react @types/react-dom --dev
Raw
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"jsx": "react",
// "noEmit": 如果是使用 create-react-app 编译的话就 true 啦
}
}
Raw
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/code.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js', '.tsx'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment