Мой файл webpack.config.prod.js не создает файл bundle.js - PullRequest
Новая
       27

Мой файл webpack.config.prod.js не создает файл bundle.js

0 голосов
/ 11 июня 2019

Я настроил файл 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

Папка моего проекта выглядит так:

Project folder structure

И мой 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'
      }
    ]
  }
}

Что я здесь не так делаю?

1 Ответ

1 голос
/ 11 июня 2019

Похоже, вы пытаетесь загрузить файл 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.

...