webpack：生产构建后缺少自定义样式
Posted
技术标签:
【中文标题】webpack：生产构建后缺少自定义样式【英文标题】：webpack: custom style is missing after production build 【发布时间】：2019-03-13 03:22:21 【问题描述】：我已经更新了我的 webpack 文件。现在它不会将我的自定义样式应用于主样式包。没有错误，捆绑中缺少自定义样式的类。
当我使用development 模式运行构建时 - 一切正常，我的样式存在于包中。只有production build 才会发生这种情况。
我尝试了extract-text-webpack-plugin 而不是mini-css-extract-plugin，但结果相同 - 在产品构建中我的样式丢失了。
我会非常感谢任何形式的帮助。
这是文件：
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:
compress: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
,
sourceMap: true,
),
],
,
devServer:
contentBase: path.join(__dirname),
compress: 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-recommended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
,
"husky":
"hooks":
"pre-commit": "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】：问题是我的package.json 文件中的sideEffects: false。
我找到了一个issue on Github 并且存在一些与之相关的问题。
我这样做的主要原因 - 我想在我的开发模式下制作一个树柄。它按我的预期工作，但在生产模式下，我所有的自定义样式都丢失了。为了解决这个问题，我刚刚删除了sideEffects: false。所以我在开发模式下丢失了树柄（认为在开发模式下实现它并不是一个好的解决方案，但是）。
【讨论】：
天哪，我找了这个问题 4 个小时，终于解决了！！ （我已将“.css”和“.scss”作为数组添加到我的 package.json）以上是关于webpack：生产构建后缺少自定义样式的主要内容，如果未能解决你的问题，请参考以下文章