I've updated my webpack file. Now it's won't apply my custom style to the main style bundle. No errors, classes with custom style just missing in bundle.
When I'm running build with development mode - everything is ok and my styles are exist in the bundle. Such happens only with production build.
I tried extract-text-webpack-plugin instead mini-css-extract-plugin but result is same - in prod build my styles are missing.
I'll be very apriciated for any kind of help.
Here is files:
webpack.config.js
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = 'public';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);
module.exports = (env, options) => {
const mode = env ? env.mode : options.mode;
return {
entry: './assets/app.jsx',
output: {
path: path.resolve(__dirname, publicPath),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
},
],
},
{
test: /\.s?css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loaders: ['babel-loader'],
resolve: { extensions: ['.js', '.jsx'] },
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70,
},
},
},
],
},
{
test: /\.(otf|ttf|woff|woff2)$/,
exclude: [/node_modules/],
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(publicPath, {}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './assets/www/index.html',
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
press: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
},
sourceMap: true,
}),
],
},
devServer: {
contentBase: path.join(__dirname),
press: true,
port: 9000,
publicPath: '/',
historyApiFallback: true,
},
devtool: mode === 'development' ? 'cheap-inline-module-source-map' : '',
};
};
package.json
{
"name": "react-templates",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"sideEffects": false,
"scripts": {
"build": "webpack --progress --mode production",
"build-dev": "webpack -p --progress --mode development",
"start": "webpack-dev-server --mode production --open",
"eslint": "eslint . --ext .js --ext .jsx",
"stylelint": "stylelint assets/scss",
"deploy-current-branch-dev": "npm run build-dev && firebase deploy",
"deploy-dev": "git checkout -- . && git clean -fd && git checkout develop && git remote update && git pull && npm run build-dev && firebase deploy"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "3.8.2",
"autoprefixer": "9.0.1",
"brace": "0.11.1",
"clean-webpack-plugin": "0.1.19",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fast-async": "^6.3.8",
"file-system": "2.2.2",
"firebase": "5.3.0",
"history": "4.7.2",
"html-webpack-plugin": "^3.2.0",
"less-vars-to-js": "1.3.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.4.3",
"moment": "2.22.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"prop-types": "15.6.2",
"react": "15.6.1",
"react-ace": "6.1.4",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "15.6.1",
"react-favicon": "0.0.14",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-sticky": "^6.0.3",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.16.1",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-import": "^1.9.1",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"file-loader": "^2.0.0",
"husky": "1.0.0-rc.13",
"image-webpack-loader": "^4.3.1",
"less": "3.8.1",
"less-loader": "4.1.0",
"node-sass": "4.9.2",
"postcss-loader": "2.1.6",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.4.0",
"stylelint-config-remended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"husky": {
"hooks": {
"pre-mit": "npm run eslint && npm run stylelint"
}
}
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
I've updated my webpack file. Now it's won't apply my custom style to the main style bundle. No errors, classes with custom style just missing in bundle.
When I'm running build with development mode - everything is ok and my styles are exist in the bundle. Such happens only with production build.
I tried extract-text-webpack-plugin instead mini-css-extract-plugin but result is same - in prod build my styles are missing.
I'll be very apriciated for any kind of help.
Here is files:
webpack.config.js
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = 'public';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);
module.exports = (env, options) => {
const mode = env ? env.mode : options.mode;
return {
entry: './assets/app.jsx',
output: {
path: path.resolve(__dirname, publicPath),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
},
],
},
{
test: /\.s?css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loaders: ['babel-loader'],
resolve: { extensions: ['.js', '.jsx'] },
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70,
},
},
},
],
},
{
test: /\.(otf|ttf|woff|woff2)$/,
exclude: [/node_modules/],
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(publicPath, {}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './assets/www/index.html',
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
press: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
},
sourceMap: true,
}),
],
},
devServer: {
contentBase: path.join(__dirname),
press: true,
port: 9000,
publicPath: '/',
historyApiFallback: true,
},
devtool: mode === 'development' ? 'cheap-inline-module-source-map' : '',
};
};
package.json
{
"name": "react-templates",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"sideEffects": false,
"scripts": {
"build": "webpack --progress --mode production",
"build-dev": "webpack -p --progress --mode development",
"start": "webpack-dev-server --mode production --open",
"eslint": "eslint . --ext .js --ext .jsx",
"stylelint": "stylelint assets/scss",
"deploy-current-branch-dev": "npm run build-dev && firebase deploy",
"deploy-dev": "git checkout -- . && git clean -fd && git checkout develop && git remote update && git pull && npm run build-dev && firebase deploy"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "3.8.2",
"autoprefixer": "9.0.1",
"brace": "0.11.1",
"clean-webpack-plugin": "0.1.19",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fast-async": "^6.3.8",
"file-system": "2.2.2",
"firebase": "5.3.0",
"history": "4.7.2",
"html-webpack-plugin": "^3.2.0",
"less-vars-to-js": "1.3.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.4.3",
"moment": "2.22.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"prop-types": "15.6.2",
"react": "15.6.1",
"react-ace": "6.1.4",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "15.6.1",
"react-favicon": "0.0.14",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-sticky": "^6.0.3",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.16.1",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-import": "^1.9.1",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"file-loader": "^2.0.0",
"husky": "1.0.0-rc.13",
"image-webpack-loader": "^4.3.1",
"less": "3.8.1",
"less-loader": "4.1.0",
"node-sass": "4.9.2",
"postcss-loader": "2.1.6",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.4.0",
"stylelint-config-remended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"husky": {
"hooks": {
"pre-mit": "npm run eslint && npm run stylelint"
}
}
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
1 Answer
Reset to default 15The probplem is sideEffects: false in my package.json file.
I found an issue on Github and there are some issues related to it.
Main reason I did it - I wanted to make a tree shank in my development mode. It worked as I expected but in production mode all my custom styles are missing. To solve this problem I just removed sideEffects: false. So I lost tree shank in dev mode (think it's not good solution to make it in development mode but however).