Use css modules
parent
14ce3b1450
commit
118e1cd096
@ -1,2 +1,2 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
dist/
|
build/
|
@ -1,12 +1,8 @@
|
|||||||
module.exports = api => {
|
module.exports = api => {
|
||||||
// caching the babel config
|
// caching the babel config
|
||||||
api.cache.using(() => process.env.NODE_ENV)
|
api.cache.using(() => process.env.NODE_ENV)
|
||||||
console.log(process.env.NODE_ENV, {
|
|
||||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
|
||||||
plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
|
|
||||||
})
|
|
||||||
return {
|
return {
|
||||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
presets: ['@babel/preset-env', '@babel/preset-react']
|
||||||
plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
|
// plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('postcss-flexbugs-fixes'),
|
||||||
|
require('postcss-preset-env'),
|
||||||
|
require('postcss-normalize')
|
||||||
|
]
|
||||||
|
}
|
@ -1,23 +1,85 @@
|
|||||||
|
const path = require('path')
|
||||||
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
|
||||||
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||||
|
.BundleAnalyzerPlugin
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
|
||||||
|
const WebpackBar = require('webpackbar')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = (env, argv) => {
|
||||||
devtool: 'source-map',
|
const isEnvProduction = argv.mode === 'production'
|
||||||
module: {
|
const isEnvDevelopment = argv.mode === 'development'
|
||||||
rules: [
|
|
||||||
{
|
return {
|
||||||
test: /.js$/,
|
output: {
|
||||||
exclude: /node_modules/,
|
path: path.resolve(__dirname, 'build'),
|
||||||
loader: 'babel-loader'
|
filename: 'static/js/[name].[contenthash:8].js',
|
||||||
|
chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'
|
||||||
|
},
|
||||||
|
devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
// process javascript with babel
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'babel-loader'
|
||||||
|
},
|
||||||
|
// process css. css modules are enabled.
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
isEnvDevelopment && 'style-loader',
|
||||||
|
isEnvProduction && MiniCssExtractPlugin.loader,
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
modules: {
|
||||||
|
localIdentName: isEnvProduction
|
||||||
|
? '[hash:base64]'
|
||||||
|
: '[path][name]__[local]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'postcss-loader'
|
||||||
|
].filter(Boolean)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
chunks: 'all',
|
||||||
|
name: false
|
||||||
}
|
}
|
||||||
]
|
},
|
||||||
},
|
plugins: [
|
||||||
plugins: [
|
// creat an index.html
|
||||||
new HtmlWebpackPlugin(),
|
new HtmlWebpackPlugin(),
|
||||||
// hot reload not working right now
|
// show a progress bar
|
||||||
new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
|
new WebpackBar(),
|
||||||
],
|
// create a report.html for bundle size
|
||||||
devServer: {
|
new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
|
||||||
stats: 'minimal'
|
// extract css to css files
|
||||||
|
isEnvProduction &&
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: 'static/css/[name].[contenthash:8].css',
|
||||||
|
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
|
||||||
|
}),
|
||||||
|
// use cssnano to minify css
|
||||||
|
isEnvProduction &&
|
||||||
|
new OptimizeCssAssetsPlugin({
|
||||||
|
cssProcessorOptions: {
|
||||||
|
map: { inline: false, annotation: true }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// hot reload not working right now
|
||||||
|
// isEnvDevelopment &&
|
||||||
|
// new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
|
||||||
|
].filter(Boolean),
|
||||||
|
devServer: {
|
||||||
|
stats: 'minimal'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue