webpack 4 MiniCssExtractPlugin и webpack-merge

260
14 августа 2018, 02:00

Пытаюсь настроить webpack4 , всё работает как надо, за исключением выноса стилей из js файла. без webpack-merge работает, с webpack-merge не видит файла. подскажите в чем может быть проблема? (ошибок не выдает)

запускаю нужные мне модули в зависимости от mode, пользуюсь webpack-merge.

  1. модуль для переноса стилей.
  2. конфиг вебпака с webpack-merge.
  3. конфиг вебпака с работающим переносом style без webpack-merge.
//----------------------------------------------------------------
//css.extract.js
//----------------------------------------------------------------
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function (paths) {
  return {
    module: {
      rules: [
        {
          test: /\.sass$/,
          include: paths,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'style.[contenthash].css',
      }),
    ],
  }
}
//----------------------------------------------------------------
//Мой webpack (не рабочий вариант)
//----------------------------------------------------------------
const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//modules
const extractCSS  = require('./webpack/css.extract');
const PROJECT  = 'project';
const PATHS = {
    src: path.join(__dirname, `src/${PROJECT}`),
    build: path.join(__dirname, `dist/${PROJECT}`)
};

const common = merge([
  {
    devtool: 'source-map',
    entry: `${PATHS.src}/index.js`,
    output: {
      path: PATHS.build,
      filename: "js/[name].[hash].js"
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: `${PATHS.src}/index.html`,
        inject: false,
        hash: true
      })
    ]
  },

])
module.exports = function(mode) {
  if (mode = "development") {
    return merge([
      common,
            // ...
    ]);
  }
  if (mode = "production") {
    return merge([
      common,
      extractCSS(),
      // ...
    ]);
  }
};
//----------------------------------------------------------------
//webpack (работает перенос стилей)
//----------------------------------------------------------------
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: { main: './src/index.js' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  },
  plugins: [ 
    new CleanWebpackPlugin('dist', {} ),
    new MiniCssExtractPlugin({
      filename: 'style.[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
};
READ ALSO
Log-out из сервера авторизации

Log-out из сервера авторизации

На Angular2 для OIDC/OAuth2 авторизации я использую "oidc-client-js" библиотекуСтандартно, для обновления токенов используется silent-refresh

183
javascript и несколько input text

javascript и несколько input text

Прошу помочь решить проблемуЕсть два поля ввода, которые затем формируют список

215
Разделительные полоски в меню

Разделительные полоски в меню

Делаю с помощью border-right по всем div:

216
Кнопка с выпадающим меню без ссылок

Кнопка с выпадающим меню без ссылок

Подскажите, пожалуйста, что за технология используется на сайте для отображения кнопки с выпадающим менюЕсть кнопка выбора объявлений за "Сутки"

189