webpackを使用してCSSとJSを別々に生成できますか?


86

私は持っています:

  1. バンドルしたいJSファイル。
  2. CSSにコンパイルしたいLESSファイル(@importsを単一のバンドルに解決)。

私はこれらを2つの別々の入力として指定し、2つの別々の出力を持つことを望んでいました(おそらくextract-text-webpack-pluginを介して)。Webpackには、コンパイルを行うための適切なプラグイン/ローダーがすべてありますが、分離が気に入らないようです。

JSから直接LESSファイルを必要とする人の例を見てきました。 require('./app.less');Webpackにそれらのファイルをバンドルに含めるように指示する以外の理由がないなどの理由で、。これにより、エントリポイントを1つだけ持つことができますが、それは私には本当に間違っているようです-JSコードとは関係がないのに、なぜJSでLESSが必要なのですか?

複数のエントリポイントを使用して、エントリJSとメインLESSファイルの両方を渡してみましたが、複数のエントリポイントを使用すると、webpackはロード時にJSを実行しないバンドルを生成します-すべてをバンドルしますが、わかりません起動時に何を実行する必要がありますか。

webpackを間違って使用していますか?これらの別々のモジュールに対してwebpackの別々のインスタンスを実行する必要がありますか?JSに混合しない場合は、JS以外のアセットにwebpackを使用する必要がありますか?


私は、次のチュートリアルをお勧めすることができますmedium.freecodecamp.org/...
wilo087

回答:


29

JSに混合しない場合は、JS以外のアセットにwebpackを使用する必要がありますか?

そうでないかもしれない。Webpackは間違いなくjs中心であり、構築しているのはjsアプリケーションであるという暗黙の前提があります。その実装によりrequire()、すべてをモジュールとして扱うことができ(Sass / LESSパーシャル、JSON、ほとんどすべてを含む)、依存関係の管理を自動的に行います(requireバンドルされているものすべて、その他は何もありません)。

JSコードとは関係がないのに、JSでLESSが必要なのはなぜですか?

これを行うのは、アプリケーションの一部(Reactコンポーネント、バックボーンビューなど)をjsで定義しているためです。アプリケーションのその部分には、それに付随するCSSがあります。個別に構築され、jsモジュールから直接参照されていない外部CSSリソースによっては、壊れやすく、操作が難しく、スタイルが古くなるなどの可能性があります。Webpackでは、すべてをモジュール化しておくことをお勧めします。 (Sass、何でも)そのjsコンポーネントに付随する部分的なものであり、jsコンポーネントrequire()は依存関係を明確にするためにそれを使用します(あなたとビルドツールにとって、不要なスタイルをビルドすることはありません)。

webpackを使用してCSSを単独でバンドルできるかどうかはわかりません(CSSファイルがどのjsからも参照されていない場合)。プラグインなどで何かを接続できると確信していますが、箱から出してすぐに使用できるかどうかはわかりません。jsからCSSファイルを参照する場合は、Extract Textプラグインを使用して、CSSを別のファイルに簡単にバンドルできます。


18

require('main/less)JSを使用せずに個別のCSSバンドルを生成できますが、Brendanが回答の最初の部分で指摘したように、WebpackはグローバルCSSバンドルがモジュラーJSと一緒に使用できるようには設計されていませんが、いくつかのオプションがあります。 。

1つ目は、main.lessのエントリポイントを追加してから、ExtractTextプラグインを使用してCSSバンドルを作成することです。

var webpack = require('webpack'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        home: [
            'js/common',
            'js/homepage'
        ],
        style: [
            'styles/main.less'
        ]
    },
    output: {
        path: 'dist',
        filename: "[name].min.js"
    },
    resolve: {
        extensions: ["", ".js"]
    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css", "less")
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].min.css", {
            allChunks: true
        })
    ]
};

この方法の問題は、バンドルだけでなく不要なJSファイルも生成することです。この例style.jsでは、これは単なる空のWebpackモジュールです。

もう1つのオプションは、メインのlessファイルを既存のWebpackエントリポイントに追加することです。

var webpack = require('webpack'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        home: [
            'js/common',
            'js/homepage',
            'styles/main.less'
        ],
    },
    output: {
        path: 'dist',
        filename: "[name].min.js"
    },
    resolve: {
        extensions: ["", ".js"]
    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css", "less")
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].min.css", {
            allChunks: true
        })
    ]
};

これは、エントリポイントが1つしかない場合に理想的ですが、エントリポイントが1つ以上ある場合は、メインの少ないファイルを追加するエントリポイントを任意に選択する必要があるため、Webpackの設定は少し奇妙に見えます。


10

bdmasonの以前の答えをさらに明確にするために、次のように、ページごとにJSとCSSのバンドルを作成することが望ましい構成であるように思われます。

 entry: {
        Home: ["./path/to/home.js", "./path/to/home.less"],
        About: ["./path/to/about.js", "./path/to/about.less"]
    }

次に、[name]スイッチを使用します。

output: {
        path: "path/to/generated/bundles",
        filename: "[name].js"
    },
plugins: new ExtractTextPlugin("[name].css")

完全な構成-質問に関連しないいくつかの追加があります(実際にはLESSではなくSASSを使用しています):

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
require('babel-polyfill');

module.exports = [{
    devtool: debug ? "inline-sourcemap" : null,
    entry: {
        Home: ['babel-polyfill', "./home.js","path/to/HomeRootStyle.scss"],
        SearchResults: ['babel-polyfill', "./searchResults.js","path/to/SearchResultsRootStyle.scss"]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader","css-raw-loader!sass-loader")
            }
        ]
    },
    output: {
        path: "./res/generated",
        filename: "[name].js"
    },
    plugins: debug ? [new ExtractTextPlugin("[name].css")] : [
        new ExtractTextPlugin("[name].css"),
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: true
            }
        })
    ]
}
];

9

mini-css-extractプラグインを使用したwebpack4ソリューション

webpackチームは、extract textpluginではなくmini-css-extractを使用することを推奨しています

このソリューションでは、cssエントリのみを含む個別のチャンクを作成できます。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    foo: path.resolve(__dirname, 'src/foo'),
    bar: path.resolve(__dirname, 'src/bar'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

これは、私の個人的なプロジェクトの1つからの複数のエントリを使用したより工夫された例です。

const ManifestPlugin = require('webpack-manifest-plugin')
const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VENDOR = path.join(__dirname, 'node_modules')
const LOCAL_JS = path.join(__dirname, 'app/assets/js')
const LOCAL_SCSS = path.join(__dirname, 'app/assets/scss')
const BUILD_DIR = path.join(__dirname, 'public/dist')
const EXTERNAL = path.join(__dirname, 'public/external')

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    vendor: [
      `${VENDOR}/jquery/dist/jquery.js`,
      `${VENDOR}/codemirror/lib/codemirror.js`,
      `${VENDOR}/codemirror/mode/javascript/javascript.js`,
      `${VENDOR}/codemirror/mode/yaml/yaml.js`,
      `${VENDOR}/zeroclipboard/dist/ZeroClipboard.js`,
    ],
    app: [
      `${LOCAL_JS}/utils.js`,
      `${LOCAL_JS}/editor.js`,
      `${LOCAL_JS}/clipboard.js`,
      `${LOCAL_JS}/fixtures.js`,
      `${LOCAL_JS}/ui.js`,
      `${LOCAL_JS}/data.js`,
      `${LOCAL_JS}/application.js`,
      `${LOCAL_JS}/google.js`
    ],
    'appStyles': [
      `${EXTERNAL}/montserrat.css`,
      `${EXTERNAL}/icons.css`,
      `${VENDOR}/purecss/pure-min.css`,
      `${VENDOR}/purecss/grids-core-min.css`,
      `${VENDOR}/purecss/grids-responsive-min.css`,
      `${VENDOR}/codemirror/lib/codemirror.css`,
      `${VENDOR}/codemirror/theme/monokai.css`,
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        appStyles: {
          name: 'appStyles',
          test: (m, c, entry = 'appStyles') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  module:  {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [ 'script-loader'],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.css', '.scss']
  },
  output: {
    path: BUILD_DIR,
    filename: "[name].[chunkhash].js",
  },
  plugins: [
    new ManifestPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ]
};

このアプローチはあまりモジュール化されていないことは理解していますが、それを構築するための基盤を提供するはずであり、JavaScriptとCSSを混在させたくないプロジェクトでwebpackを採用するための優れた戦略です。

このアプローチの欠点は、css-loaderが追加のjavascriptファイルを生成することです(使用するかどうかに関係なく)。これはおそらくwebpack5で修正されるでしょう

JSに混合しない場合は、JS以外のアセットにwebpackを使用する必要がありますか?

これには何の問題もありませんが、最終的には、複数のビルドシステムを管理するための許容度に依存します。私にとってこれはやり過ぎのように感じるので、私の好みはwebpackエコシステムにとどまることです。

上記の戦略の詳細については、https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entryを参照してください。


これが今日のデフォルトの答えになるはずです
GionaGranata20年

8

はい、これは可能ですが、他の人が言ったように、そうするために追加のパッケージが必要になります(package.jsonの下のdevDependenciesを参照してください)。これは、ブートストラップSCSS-> CSSおよびブートストラップJS-> JSをコンパイルするために使用したサンプルコードです。

webpack.config.js:

module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    entry: ['./src/app.js', './src/scss/app.scss'],
    output: {
    path: path.resolve(__dirname, 'lib/modules/theme/public'),
    filename: 'js/bootstrap.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'css/bootstrap.css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

追加のpostcss.config.jsファイル:

module.exports = {
    plugins: {
        'autoprefixer': {}
    }
}

package.json:

{
  "main": "app.js",
  "scripts": {
    "build": "webpack",
    "start": "node app.js"
  },
  "author": "P'unk Avenue",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.1.3",
  },
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "css-loader": "^1.0.1",
    "exports-loader": "^0.7.0",
    "extract-loader": "^3.1.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "popper.js": "^1.14.6",
    "postcss-cli": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  }
}

ここのチュートリアルを参照してください:https//florianbrinkmann.com/en/4240/sass-webpack


1

他の人が述べたように、プラグインを使用できます。

ExtractTextPlugin は非推奨です。

MiniCssExtractPluginWebpack構成で現在推奨されているものを使用できます。

module.exports = {
     entry: {
        home: ['index.js', 'index.less']
     },
     plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
     ]
}

0

また、LessrequireステートメントをエントリJSファイルに入れることもできます。

body.jsで

// CSS
require('css/_variable.scss')
require('css/_npm.scss')
require('css/_library.scss')
require('css/_lib.scss')

次にwebpackで

  entry: {
    body: [
      Path.join(__dirname, '/source/assets/javascripts/_body.js')
    ]
  },

const extractSass = new ExtractTextPlugin({
  filename: 'assets/stylesheets/all.bundle.css',
  disable: process.env.NODE_ENV === 'development',
  allChunks: true
})
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.