web-dev-qa-db-ja.com

Webpackのmini-css-extract-pluginを使用した出力2（以上）の.cssファイル

Webpack 2（または3）を使用する場合、次のようなコードを記述できます。

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [
{
   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
},
{
   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
}
]

その結果、2つのcssファイルが出力されました。

mini-css-extract-pluginで同じようにするにはどうすればよいですか？ドキュメントによると、指定できるファイル名は1つだけです。

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
    })
]

ありがとう。

webpackextract-text-pluginextracttextwebpackpluginmini-css-extract-plugin
8
Shevchenko Viktor

この例はSCSSにも準拠しており、MiniCssExtractPluginを使用していません

Webpack 4.16.5では、これらの2つのパッケージを最初にインストールすることで、これを機能させることができました。

npm install --save-dev file-loader
npm install --save-dev extract-loader

次に、webpack.config.js

//const MiniCssExtractPlugin = require("mini-css-extract-plugin");

var path = require("path");

module.exports = {
    entry: ['./blocks.js','./block.editor.scss','./block.style.scss'],
    mode: 'production',//change to 'development' for non minified js
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'blocks.build.js',
        publicPath: "/dist"
    },
    watch:true,
    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [  
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].build.css',
                            context: './',
                            outputPath: '/',
                            publicPath: '/dist'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
        ],
    },
};

これは次の構造を出力します

- dist
--- block.editor.build.css
--- block.style.build.css
--- blocks.build.js

- blocks.js
- block.editor.scss
- block.style.scss

CSSインストールを最小化するには

npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.jsに追加

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

var path = require("path");

module.exports = {
    .....
    watch:true,
    module: {
        rules: [
            .....
        ],
    },
    optimization: {
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true // set to true if you want JS source maps
          }),
          new OptimizeCSSAssetsPlugin({})
        ]
    },
};

お役に立てれば

14
Jim-miraidev