フロントエンド用テンプレート
2021 年最新版 (React + TypeScript + emotion + chakra-ui)
// 古くなっているので後で修正する
webpack@5 で運用, ビルドは数秒ぐらい
// cache を効かせているので
code:webpack.config.ts
import path from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
import TerserWebpackPlugin from 'terser-webpack-plugin'
import { Configuration } from 'webpack-dev-server'
const isProduction = process.env.NODE_ENV === 'production'
const commonPlugins: webpack.WebpackPluginInstance[] = [
new HtmlWebpackPlugin({
template: './template/index.html',
}),
new ForkTsCheckerWebpackPlugin(),
]
const plugins: webpack.WebpackPluginInstance[] = isProduction
const devServer: Configuration = {
contentBase: path.resolve(__dirname, '/dist'),
historyApiFallback: true,
open: true,
port: 8000,
hot: true,
proxy: {
},
}
const config: webpack.Configuration = {
mode: isProduction ? 'production' : 'development',
entry: './src/index.tsx',
devtool: isProduction ? false : 'inline-source-map',
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'index.js',
assetModuleFilename: 'assets/hashext', },
plugins: plugins,
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
jsx: isProduction ? 'react-jsx' : 'react-jsxdev',
},
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/resource',
},
],
},
resolve: {
},
optimization: {
minimize: isProduction,
minimizer: [
new TerserWebpackPlugin({
extractComments: {
condition: /^\**!|@preserve|@license|@cc_on/i,
filename: 'LICENSE.txt',
banner: false,
},
}),
],
},
cache: {
type: 'filesystem',
buildDependencies: {
},
},
devServer: devServer,
}
export default config
code:tsconfig.webpack.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"esModuleInterop": true
}
}
code:tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "react-jsxdev",
"sourceMap": true,
"isolatedModules": true,
"esModuleInterop": true,
"moduleResolution": "bundler",
"strict": true,
"noImplicitAny": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}