webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。
まぁこれが嫌で、たまにしかバージョンを上げないので、余計に出るんですが。
もうひとつ、あくまでwebpackはビルドツールなので不都合がない限り放置が多いというのもある。
| 変更前 | 1.0.1 |
| 変更後 | 3.5.3 |
| webpack | 4.43.0 |
| webpack-cli | 3.3.11 |
『バージョンを一気に上げたらそうなるわ！』ですが、webpackのバージョン5（ベータ版）が出てからけっこう時間が経ってます。
安定版が出てきてもおかしくないのでパッケージのバージョンを一度最新にする必要がありました。
変更前の設定です。
webpack.config.js
const MODE = process.env.NODE_ENV;
// ソースマップ利用有無(productionのときは利用しない)
const isSourceMap = MODE === "development";
const Style_Loader = {
loader: "style-loader",
};
const CSS_Loader = {
loader: "css-loader",
options: {
// CSS内のurl()の取り込み
url: false,
minimize: true, // <---------- エラー
sourceMap: isSourceMap,
// 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
importLoaders: 2,
},
};
const PostCss_Loader = {
loader: "postcss-loader",
options: {
sourceMap: isSourceMap,
plugins: [
require("cssnano")(),
require("autoprefixer")({
grid: true,
}),
],
},
};
cosnt Sass_Loader = {
loader: "sass-loader",
options: {
sourceMap: isSourceMap,
},
};
module.exports = {
module: {
rules: [
/*
* sass, autoprefixer, minify, export -> .js (bundle)
*/
{
test: /sample\.scss$/,
use: [
Style_Loader,
CSS_Loader,
PostCss_Loader,
Sass_Loader,
],
},
],
}
// ほか省略
};するとこんなエラーが。
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
at validate (***\***\node_modules\schema-utils\dist\validate.js:96:11)
at Object.loader (***\***\node_modules\css-loader\dist\index.js:36:28)css-loaderのオプションminimizeが無くなったのは新しい情報ではありません。2年くらい前には無くなってます。
（直すのが面倒でわざと低いバージョンを使ってた。）
ログを見るかぎり使えるオプションはこれ。
| url |
| import |
| modules |
| sourceMap |
| importLoaders |
| localsConvention |
| onlyLocals |
| esModule |
一応、ドキュメントを確認しましたが、やっぱりありません。
sass-loaderはデフォルトでminimizeしてくれるので、minimizeオプションを削除するだけで対応できます。
それがなくても、postcss-loaderのcssnanoも入っているので、これで対応すればいいし。
ちなみに、sass-loaderよりもpost-cssのcssnanoのほうがサイズを小さくできる。
というかなんだ？この設定は？
cssnano使ってる時点でcss-loaderのminimizeいらないし。
2年前の自分に聞いてみたい。
