Webpack 4 не создает CSS-файл без babel-preset-es2015 - PullRequest
Новая
       15

Webpack 4 не создает CSS-файл без babel-preset-es2015

0 голосов
/ 31 августа 2018

У меня странная проблема с момента обновления до Webpack 4 и babel-preset-env. Когда я удаляю es2015 как пресет, он не разделяет CSS. Все остальное компилируется как обычно, но нет файла CSS, если я не включу этот пресет.

Мой файл .babelrc: 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "targets": "> 5%, last 2 versions",
        "forceAllTransforms": true
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-decorators", { "legacy": true, "decoratorsLegacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true}],
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ]
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    },
    "production": {
      "plugins": [
        "transform-imports"
      ]
    }
  }
}

Мой конфиг веб-пакета: 

module.exports = {
  mode: 'production',
  entry: ['babel-polyfill', path.resolve(__dirname,'./src/index.js')],
  output: {
    chunkFilename: '[name].[chunkhash:4].bundle.js',
    filename: '[name].[chunkhash:4].bundle.js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new CleanWebpackPlugin(['dist/']),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:4].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [path.resolve(__dirname, './node_modules/')],
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: false }
          }
        ]
      },
      {
        test: /\.(sass|scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          keep_fnames: true,
          keep_classnames: true,
          compress: {
            dead_code: true,
            drop_console: true
          },
          mangle: {
            keep_fnames: true
          }
        },
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        },
        commons: {
          test: /[\\/]node_modules[\\/].*js/,
          name: 'vendor',
          chunks: 'all',
          minChunks: 2
        }
      },
      chunks: 'all'
    }
  }
};

Я мог бы оставить это в покое, но включение es2015 также препятствует созданию правильных кусков.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Решением в этом случае было удаление "sideEffects": false из моего package.json. Кроме того, изменение на "sideEffects": ["*.scss", "*.css", "*.sass"] решило проблему и повлияло на окончательную сборку. Насколько я понимаю, импорт CSS в Webpack можно считать «побочным эффектом», если вы не используете модули CSS.

0 голосов
/ 07 сентября 2018

Я бы начал с установки современных deps, которые для Babel переместились в новое пространство имен с npm i @babel/core @babel/preset-env @babel/preset-react babel-loader@latest и npm un babel-core babel-preset-env babel-preset-react, также обновив .babelrc, чтобы отразить изменения с "presets": ["@babel/preset-env", ...] и т. Д.

Тогда то, что вам действительно нужно сделать, это объединить ваши два plugins свойства в одно ... прямо сейчас ваш конфиг: 

config = {
  ...
  plugins: [],
  ...
  plugins: [],
  ...
}

Второй набор плагинов потенциально перезаписывает MiniCssExtractPlugin

...