npm i 查找最适合当前nodejs的包 -D 开发环境 -S 生成环境
cat > "package.json" <<EOF
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --open"
}
}
EOF
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader @types/react @types/react-dom html-webpack-plugin html-loader style-loader css-loader sass-loader node-sass
npm i -S react react-dom
mkdir -p src/typings dist public
cat > "public/index.html" <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000" />
<meta name="description" content="Webpack with TypeScript" />
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>
EOF
cat > "src/typings/scss.d.ts" <<EOF
declare module '*.css' {
const content: { [className: string]: string; };
export default content;
}
declare module '*.scss' {
const content: { [className: string]: string; };
export default content;
}
EOF
cat > "src/index.scss" <<EOF
.title {
color: red;
}
EOF
cat > "src/index.tsx" <<EOF
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './index.scss';
const App = () => {
return <h1 className={styles.title}>Hello Wepack!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
EOF
cat > "tsconfig.json" <<EOF
{
"compileOnSave": true,
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowJs": true,
"jsx": "react",
"outDir": "./dist",
"rootDir": "./",
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": "./src",
"typeRoots": ["node_modules/@types", "src/typings"],
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
EOF
cat > "webpack.config.js" <<EOF
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.tsx'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
externals : {
"react" : 'React',
"react-dom" : 'ReactDOM'
},
module: {
rules: [
{test: /\.html$/, use: ['html-loader']},
{test: /\.tsx?$/, use: ['ts-loader']},
{
test: /\.s(a|c)ss$/,
use: [
'style-loader',
{loader: 'css-loader', options: { modules: true }},
'sass-loader'
]
}
]
},
devServer: {
host: '0.0.0.0',
port: 8888
}
};
EOF
#npm run dev
#npm run build
