Use css modules
parent
14ce3b1450
commit
118e1cd096
@ -1,2 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
build/
|
@ -1,12 +1,8 @@
|
||||
module.exports = api => {
|
||||
// caching the babel config
|
||||
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 {
|
||||
presets: ['@babel/preset-env', '@babel/preset-react'],
|
||||
plugins: [api.env('development') && 'react-refresh/babel'].filter(Boolean)
|
||||
presets: ['@babel/preset-env', '@babel/preset-react']
|
||||
// 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 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 = {
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader'
|
||||
module.exports = (env, argv) => {
|
||||
const isEnvProduction = argv.mode === 'production'
|
||||
const isEnvDevelopment = argv.mode === 'development'
|
||||
|
||||
return {
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
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: [
|
||||
new HtmlWebpackPlugin(),
|
||||
// hot reload not working right now
|
||||
new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
|
||||
],
|
||||
devServer: {
|
||||
stats: 'minimal'
|
||||
},
|
||||
plugins: [
|
||||
// creat an index.html
|
||||
new HtmlWebpackPlugin(),
|
||||
// show a progress bar
|
||||
new WebpackBar(),
|
||||
// create a report.html for bundle size
|
||||
new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
|
||||
// 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