備考
環境は jmfirth/webpack イメージ で構築した Docker コンテナです
extract-text-webpack-plugin == 3.0.2
nodejs == 10.5.0 (初回投稿時は 8.4.0)
npm == 6.1.0 (初回投稿時は 5.3.0)
webpack == 3.1.0 (初回投稿時は 2.7.0)
経緯 (Circumstances)
このブログでは webpack を使って CSS もすべて bundle.js にまとめていたのですが、 Google 先生 がうまく解釈してくれないっぽく、 Web master tool とかで見たときに崩れていました。
検索インデックスに影響する恐れもあったので CSS は 分離しようという結論に至りました。
対応 (Correspondence)
ExtractTextPlugin というプラグインを使うとよいらしいです。
webpack.config.js はこんな感じになりました。
const path = require('path'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { resolve: { alias: {'vue$': 'vue/dist/vue.esm.js'} }, entry: './assets/entry.js', output: { path: path.resolve('./files/static/'), filename: 'bundle.js' }, plugins: [ new ExtractTextPlugin({ filename: 'style.css', allChunks: true }), new UglifyJsPlugin(), ], //devtool: 'source-map', module: { rules: [ { test: /\.vue$/, use: ['babel-loader', 'vue-loader'], }, { test: /\.js$/, loader: 'babel-loader', }, { test: /\.styl$/, loader: ExtractTextPlugin.extract({ use: [ { loader: 'css-loader', options: { minimize: true, } }, 'stylus-loader' ], }) }, { test: /\.svg$/, use: ['url-loader',], }, ] }, };
エラーが (Occurred an error)
とくに設定におかしいところはないと思うんですが、 webpack を実行すると以下のようになりました。
npm info it worked if it ends with ok npm info using npm@5.3.0 npm info using node@v8.4.0 npm info lifecycle cronote@2.0.0~preinstall: cronote@2.0.0 npm info linkStuff cronote@2.0.0 npm info lifecycle cronote@2.0.0~install: cronote@2.0.0 npm info lifecycle cronote@2.0.0~postinstall: cronote@2.0.0 npm info lifecycle cronote@2.0.0~prepublish: cronote@2.0.0 npm info lifecycle cronote@2.0.0~prepare: cronote@2.0.0 npm info lifecycle undefined~preshrinkwrap: undefined npm info lifecycle undefined~shrinkwrap: undefined npm info lifecycle undefined~postshrinkwrap: undefined npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none was installed. npm WARN url-loader@0.5.9 requires a peer of file-loader@* but none was installed. npm WARN cronote@2.0.0 license should be a valid SPDX license expression npm info ok Webpack is watching the files… /root/cronote/node_modules/extract-text-webpack-plugin/dist/index.js:188 chunk.sortModules(); ^ TypeError: chunk.sortModules is not a function at /root/cronote/node_modules/extract-text-webpack-plugin/dist/index.js:188:19 at /root/cronote/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3096:16 at eachOfArrayLike (/root/cronote/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1055:9) at eachOf (/root/cronote/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1103:5) at Object.eachLimit (/root/cronote/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3158:5) at Compilation.<anonymous> (/root/cronote/node_modules/extract-text-webpack-plugin/dist/index.js:184:27) at Compilation.applyPluginsAsyncSeries (/root/cronote/node_modules/tapable/lib/Tapable.js:206:13) at Compilation.seal (/root/cronote/node_modules/webpack/lib/Compilation.js:579:8) at /root/cronote/node_modules/webpack/lib/Compiler.js:493:16 at /root/cronote/node_modules/tapable/lib/Tapable.js:289:11 at _addModuleChain (/root/cronote/node_modules/webpack/lib/Compilation.js:481:11) at processModuleDependencies.err (/root/cronote/node_modules/webpack/lib/Compilation.js:452:13) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9)
検索すると 同じ現象が報告されてる GitHub Issue がいくつかあって
-
https://github.com/JeffreyWay/laravel-mix/issues/985#issuecomment-314742166
バージョンを同期したら(上げたら?)直った人や (なんか文法へん?
I had such a problem when I installed the extract-text-webpack-plugin@3 with the webpack@2.
Then I sync versions and it error gone.
-
https://github.com/JeffreyWay/laravel-mix/issues/985#issuecomment-315348561
バージョンを下げたら直ったと言う人や
I came across the same problem, and after revert the plugin to older version solved the problem
npm i extract-text-webpack-plugin@2.1.2
-
https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/574#issuecomment-316396058
webpack のバージョンを 3.3.0 に上げたら解決したという人
Solved with updating webpack to 3.3.0.
どうやら プラグインと webpack のバージョンが噛み合わないエラーみたいです。
備考
事情
このときは 少し古い 非公式 Dockerイメージを使っていたので webpack のバージョンもそれに引きづられていました。
2番目の人が言っているように extract-text-webpack-plugin のバージョンを 2.1.2 に下げて、再実行
Webpack is watching the files… Hash: e370c0230597cfebee3a Version: webpack 2.7.0 Time: 19358ms Asset Size Chunks Chunk Names bundle.js 116 kB 0 [emitted] main /root/cronote/files/static/bundle.css 14.9 kB 0 [emitted] main
通りました。
最終的には webpack のバージョンを 3.1.0 に上げたら 最新の extract-text-webpack-plugin でも動作しました
警告
CSS は output.path のディレクトリを起点に出力されるので 絶対パス指定すると予期せぬ所に出力されます。
できればファイル名で指定しましょう。
Dockerでやるなら webpack 用のイメージは node:latest を使うことをおすすめします!