我的 webpack.config.prod.js 文件没有生成 bundle.js 文件

用户9883549

我已经配置了一个webpack.config.prod.js文件。我有一个旧版本的 webpack 3,我在那里使用ExtractTextPlugin. 我升级到 webpack 4,它告诉我它ExtractTextPlugin已被弃用。我升级了它,现在使用TerserJSPlugin, MiniCssExtractPlugin and OptimizeCSSAssetsPlugin. 当我运行命令来构建我的生产文件时,我收到一长串以下错误:

ERROR in ./src/app/appOverrides.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

我的项目文件夹如下所示:

项目文件夹结构

还有我的webpack.config.prod.js文件:

import webpack from 'webpack'
import path from 'path'
import TerserJSPlugin from 'terser-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import CompressionPlugin from 'compression-webpack-plugin'


const GLOBALS = {
  DEVELOPMENT : false,
  PRODUCTION: true,
  'process.env.NODE_ENV': JSON.stringify('production')
}
export default {
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'src-gen': path.resolve(__dirname, '../src-gen'),
      'images': path.resolve(process.cwd(), './src-gen/resources')
    },
    modules: [
      path.resolve('./src'),
      path.resolve('./src-gen'),
      'node_modules'
    ]
  },
  devtool: 'source-map',
  entry: [
    'eventsource-polyfill',
    'babel-polyfill',
    './src-gen/app/index.jsx'
  ],
  target: 'web',
  output: {
    path: __dirname + '/prod',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contantBase: './prod'
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
       chunkFilename: '[id].css',
     }),
  ],
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  module: {
    rules: [
      { test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
          test: /\.(jpe?g|png|gif|svg)$/i,
          loaders: [
              'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
              'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=4&gifsicle.interlaced=false&mozjpeg.progressive=true&pngquant.quality=75-90&pngquant.speed=3'
          ]
      },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      { test: /\.(woff|woff2)$/,
         loader: 'url?prefix=font/&limit=5000'
      }
    ]
  }
}

我在这里做错了什么?

糖果口香糖

看起来您正在尝试直接加载 Sass 文件css-loader,该文件无法识别 SCSS 语法。

首先,尝试安装sass-loader如下:

npm install --save-dev sass-loader

或者:

yarn add --dev sass-loader

然后,将此代码替换为webpack.config.prod.js

{
  test: /\.s?css$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader'],
},

具有以下内容:

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader'
  ]
},
{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader'
  ]
},

这样,任何.css文件都将像平常一样直接处理css-loader,而任何.scss文件将首先通过sass-loader,这会将Sass SCSS 代码编译为纯 CSS。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我的webpack.config.js无法读取任何图像文件-Angular 8

来自分类Dev

bundle.js文件输出和webpack-dev-server

来自分类Dev

Vue js 通过 Webpack 将 bundle 拆分成几个文件

来自分类Dev

在 webpack.config.js 中定义 css 文件

来自分类Dev

React,Webpack:未生成bundle.js

来自分类Dev

Webpack 不生成 bundle.js

来自分类Dev

如何从.js文件而不是webpack.config配置和运行webpack

来自分类Dev

如何从.js文件而不是webpack.config配置和运行webpack

来自分类Dev

为什么我的webpack bundle.js和vendor.bundle.js这么大?

来自分类Dev

Webpack 无法识别我的 js 文件中的 JSX 语法

来自分类Dev

Webpack文件加载器发出的png名称与发出的bundle.js中引用的名称不同

来自分类Dev

为什么webpack生成多个js文件

来自分类Dev

如何使用react和webpack生成bundle.js?

来自分类Dev

使用webpack和gulp生成bundle.js

来自分类Dev

如何使用react和webpack生成bundle.js?

来自分类Dev

Webpack 2:如何从Bootstrap预制模板生成bundle.js?

来自分类Dev

我如何将“vue.js”添加到 webpack 的 bundle.js

来自分类Dev

Webpack:从webpack.config.js到webpack.dev.js

来自分类Dev

找不到webpack bundle.js

来自分类Dev

Webpack:找不到bundle.js

来自分类Dev

我可以使用env.js文件而不是.env文件来在next.config.js文件中使用next.js加载环境变量吗?

来自分类Dev

内联的Webpack JS文件不起作用

来自分类Dev

使用Webpack导入CSS和JS文件

来自分类Dev

Webpack不捆绑输出JS文件

来自分类Dev

内联的Webpack JS文件不起作用

来自分类Dev

htaccess将缺少的bundle。*。js版本重定向到bundle.js文件

来自分类Dev

htaccess将缺少的bundle。*。js版本重定向到bundle.js文件

来自分类Dev

webpack/node.js 构建,webpack-dev-server 是否可以将文件提供到我的公共目录?

来自分类Dev

在electron/webpack中使用flatbuffers生成的多个js文件

Related 相关文章

  1. 1

    我的webpack.config.js无法读取任何图像文件-Angular 8

  2. 2

    bundle.js文件输出和webpack-dev-server

  3. 3

    Vue js 通过 Webpack 将 bundle 拆分成几个文件

  4. 4

    在 webpack.config.js 中定义 css 文件

  5. 5

    React,Webpack:未生成bundle.js

  6. 6

    Webpack 不生成 bundle.js

  7. 7

    如何从.js文件而不是webpack.config配置和运行webpack

  8. 8

    如何从.js文件而不是webpack.config配置和运行webpack

  9. 9

    为什么我的webpack bundle.js和vendor.bundle.js这么大?

  10. 10

    Webpack 无法识别我的 js 文件中的 JSX 语法

  11. 11

    Webpack文件加载器发出的png名称与发出的bundle.js中引用的名称不同

  12. 12

    为什么webpack生成多个js文件

  13. 13

    如何使用react和webpack生成bundle.js?

  14. 14

    使用webpack和gulp生成bundle.js

  15. 15

    如何使用react和webpack生成bundle.js?

  16. 16

    Webpack 2:如何从Bootstrap预制模板生成bundle.js?

  17. 17

    我如何将“vue.js”添加到 webpack 的 bundle.js

  18. 18

    Webpack:从webpack.config.js到webpack.dev.js

  19. 19

    找不到webpack bundle.js

  20. 20

    Webpack:找不到bundle.js

  21. 21

    我可以使用env.js文件而不是.env文件来在next.config.js文件中使用next.js加载环境变量吗?

  22. 22

    内联的Webpack JS文件不起作用

  23. 23

    使用Webpack导入CSS和JS文件

  24. 24

    Webpack不捆绑输出JS文件

  25. 25

    内联的Webpack JS文件不起作用

  26. 26

    htaccess将缺少的bundle。*。js版本重定向到bundle.js文件

  27. 27

    htaccess将缺少的bundle。*。js版本重定向到bundle.js文件

  28. 28

    webpack/node.js 构建,webpack-dev-server 是否可以将文件提供到我的公共目录?

  29. 29

    在electron/webpack中使用flatbuffers生成的多个js文件

热门标签

归档