私はexpress + webpackに比較的慣れていないため、これが意図されているかどうか、そうでない場合は適切に構成する方法が不明です。質問は、mini-css-extract-plugin を使用するときに作成される追加のアセットとエントリ ポイントに関するものです。
ウェブパック構成:
Extract = require('mini-css-extract-plugin');
path = require('path');
Write = require('write-file-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
demo_scripts: path.resolve('server', 'scripts', 'demo.js'),
demo_styles: path.resolve('server', 'styles', 'demo.css')
},
output: {
path: path.resolve('.tmp'),
filename: '[name].js'
},
plugins: [new Write(), new Extract()],
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
]
},
{
test: /\.css/,
use: [
{
loader: Extract.loader
},
{
loader: 'css-loader'
}
]
}
]
}
};
webpack出力
Asset Size Chunks Chunk Names
demo_scripts.js 3.91 KiB demo_scripts [emitted] demo_scripts
demo_styles.css 36 bytes demo_styles [emitted] demo_styles
demo_styles.js 3.89 KiB demo_styles [emitted] demo_styles
Entrypoint demo_scripts = demo_scripts.js
Entrypoint demo_styles = demo_styles.css demo_styles.js
私の質問は、なぜdemo_styles.js
作成されているのですか? cssは抽出されていますが、webpackがまだcssでバンドルされたjsを作成しているように見えますが、そのファイルを表示すると、その中の唯一の行は
eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./server/styles/demo.css?");
ここで何が起こっているのかを説明できる人はいますか?
アップデート
demo_styles エントリ ポイントを削除し、プラグイン init を介して構成すると、css アセットは構築されません。
({
plugins: [
new Write(),
new Extract({
filename: 'demo_styles.css'
})
]
});
Asset Size Chunks Chunk Names
demo_scripts.js 3.91 KiB demo_scripts [emitted] demo_scripts
Entrypoint demo_scripts = demo_scripts.js
このレポはこちらです(エクスプレスブランチに注意してください)https://github.com/brewster1134/bumper/tree/express