諸行無常

IT色々お勉強中のブログ

webpack3→4でエラーになった MiniCssExtractPlugin

  • MiniCssExtractPluginの設定が上手くいってなくて動いてない

webpack/environment.js

const vue = require('./loaders/vue')
const sass = require('./loaders/sass')
const css = require('./loaders/css')


  module: {
    rules: [
      vue,
      sass,
      css,
    
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name]-[hash].css'
    }),

webpack/loaders/css.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  test: /\.(css)$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
}

webpack/loaders/sass.js

module.exports = {
  test: /\.(scss|sass)$/,
  use: ['vue-style-loader', 'css-loader', 'sass-loader']
}