webpackでsassを複数のentryから複数のcssを出力する

注意: webpack3.5.6とextract-text-webpack-plugin:3.0.0での環境のお話です。

Webpackでcssファイルを出力する場合に使用するwebpack-contrib/extract-text-webpack-plugin。

普通にsassを一つのcssに出力する場合は以下のようにすればいい。大抵の場合はこれで事足りる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: __dirname + "/src/sass",
  entry: {
      app: "./app.scss"
  },
  output: {
      path: __dirname + "/dist/css",
      filename: "style.css"
  },
  module: {
      rules: [
          {
              test: /\.scss|sass$/,
              loader: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: ["css-loader","postcss-loader", "sass-loader"]
              })
          },
          {
              test: /\.(woff|woff2|eot|ttf|svg)$/,
              loader: 'file-loader?name=../font/[name].[ext]'
          }
      ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

pc、mobileでcssファイルを分ける場合はどうすればいいのか？

entiryを複数にする、outputを複数にする。
ここまではすぐに理解したんだけどExtractTextPluginを使っている場合にどうしたらいいのか？

1
2
3
4
5
6


  plugins: [
    new ExtractTextPlugin({
        filename: "[name].css",
        allChunks: false
    })
  ]  

どうやらfilename指定するところにoutputと同じように[name].cssとするのと、allChunksをfalseにすればいい。

最終的にはこんな感じになった。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


module.exports = {
  context: __dirname + "/src/sass",
  entry: {
      pc: "./app_pc.scss",
      mobile: "./app_mobile.scss"
  },
  output: {
      path: __dirname + "/dist/css",
      filename: "[name].css"
  },
  module: {
      rules: [
          {
              test: /\.scss|sass$/,
              loader: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: ["css-loader","postcss-loader", "sass-loader"]
              })
          },
          {
              test: /\.(woff|woff2|eot|ttf|svg)$/,
              loader: 'file-loader?name=../font/[name].[ext]'
          }
      ]
  },
  plugins: [
      new ExtractTextPlugin({
          filename: "[name].css",
          allChunks: false
      })
  ]
}

最初は難しいなと思ったwebpackですが、慣れれば便利なツールなのでこれからも頑張ってwebpack力を上げていきたい。