ExtractTextPlugin は使えないから mini-css-extract-plugin を使おう(ワイメモ)
CSS のための Webpack 設定
一部情報が古かったり嘘だったりするので2018/09/19現在のメモ。
npm i -D webpack webpack-cli css-loader node-sass sass-loader postcss-loader autoprefilxer mini-css-extract-plugin optimize-css-assets-webpack-plugin
なんかいらないのも入っていていもキにしない。
{ "devDependencies": { "autoprefixer": "^9.1.5", "css-loader": "^1.0.0", "mini-css-extract-plugin": "^0.4.3", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "sass-loader": "^7.1.0", "webpack": "^4.19.1", "webpack-cli": "^3.1.0" } }
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), new OptimizeCSSAssetsPlugin({}) ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'style.css' }) ], mode: 'production', devtool: 'source-map', module: { rules: [ { test: /\.scss/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, sourceMap: true, minimize: true, importLoaders: 2 }, }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: [ require('autoprefixer')({grid: true}) ] }, }, { loader: 'sass-loader', options: { sourceMap: true, } } ], }, ], }, };