生产构建后缺少自定义样式

问题描述

使用Webpack 4.28.3的

im 当我使用开发模式运行构建时-一切正常，样式包含在捆绑包中。这种情况仅在生产版本中发生。

我在产品构建中使用了extract-text-webpack-plugin，但缺少样式。

我会很高兴获得任何帮助。

这是文件：

webpack.config.js

    let isLocal;
const mode = getMode(),hash = Date.Now(),path = require("path"),production = mode == "production",packageJson = require("./package"),entryPath = path.join(__dirname,"dev"),publicPath = path.join(__dirname,"public"),HtmlWebpackPlugin = require("html-webpack-plugin"),translatorPath = path.join(__dirname,"translator"),htmlTemplatePath = path.join("./html-template.ejs"),htmlPublicPath = path.join(publicPath,"index.html"),stylePublicPath = `style-${styleVars.direction}.css`,ExtractTextPlugin = require("extract-text-webpack-plugin"),lessLoader = { loader: "less-loader",options: { modifyVars: styleVars } },fileLoader = {
    loader: "file-loader",options: { name: `${isLocal ? "/" : ""}imgs/[name]_[hash].[ext]` },},postcssLoader = {
    loader: "postcss-loader",options: {
      ident: "postcss",plugins: () => [require("autoprefixer")({ grid: true })],cssLoader = {
    loader: "css-loader",options: {
      minimize: production,modules: true,importLoaders: 2,localIdentName: "[name]_[local]",};

console.log("mode:",mode);

module.exports = {
  mode,resolve: {
    alias: {
      Base: entryPath,Analytics: path.join(entryPath,"analytics"),Actions: path.join(entryPath,"actions"),Functions: path.join(entryPath,"functions"),Components: path.join(entryPath,"components"),Pages: path.join(entryPath,"pages"),Loader: path.join(entryPath,"components","loader"),Config: path.join(entryPath,"config"),Icon: path.join(entryPath,"icon"),Img: path.join(entryPath,"img"),Inputs: path.join(entryPath,"inputs"),devServer: {
    port: 4444,inline: true,contentBase: publicPath,historyApiFallback: true,devtool: production ? undefined : "inline-sourcemap",entry: ["babel-polyfill",translatorPath,entryPath],module: {
    rules: [
      {
        test: /\.js$/,use: [
          {
            loader: "babel-loader",options: {
              presets: ["@babel/react","@babel/preset-env"],plugins: ["@babel/plugin-proposal-class-properties"],],exclude: /(node_modules|bower_components)/,{
        test: /\.css$/i,use: production
          ? ExtractTextPlugin.extract({
              use: [
                { loader: "css-loader",options: { minimize: production } },postcssLoader,})
          : ["style-loader","css-loader",postcssLoader],{
        test: /\.less$/i,use: production
          ? ExtractTextPlugin.extract({
              use: [cssLoader,lessLoader],cssLoader,{
        test: /\.(jpe?g|png|gif|svg|ttf|woff|eot)$/i,use: [fileLoader,"image-webpack-loader"],output: {
    path: publicPath,filename: "main.js",publicPath: '/'
  },plugins: [
    new HtmlWebpackPlugin({
      h: hash,production,inject: false,stylePublicPath,info: packageJson,filename: htmlPublicPath,assetsRep: isLocal ? "" : "/assets",template: `ejs-loader!${htmlTemplatePath}`,minify: production
        ? {
            collapseWhitespace: true,minifyCSS: true,minifyJS: true,removeComments: true,}
        : undefined,}),...(production ? [new ExtractTextPlugin(stylePublicPath)] : []),};

function getMode() {
  if (!global.styleVars) global.styleVars = require("./styleVars");
  let mode = "development";
  try {
    mode1 = process.argv.find((a) => a.includes("mode")).split("=")[1];
    if (mode1 == "production") mode = mode1;
  } catch (error) {
    isLocal = true;
  }
  return mode;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）