HOME>WEBプログラム覚書>[webpack]尖りすぎない人のwebpack設定 SASS/SCSS編

[webpack]尖りすぎない人のwebpack設定 SASS/SCSS編

タグ1つで動かそうとも、画像も、フォントもCSSも全てをjsにバンドルしようとも思っていない人向けのwebpack 4設定。

webpack インストール

webpack 本体と コマンドラインツールインストール

  1. npm install --save-dev webpack webpack-cli

最終的な出力先は相対パスではなく絶対パスでの指定になるので簡単に指定できるようにpathモジュールをインストール

  1. npm install --save-dev path

scssをコンパイルしてcssとして出力するためのモジュールをインストール。

  1. npm install --save-dev node-sass sass-loader css-loader

これでSCSSからCSSへの変換はできる。

ここからjavascriptとして実行可能にする場合には css-loader をインストールするが 今回は普通にCSSとして出力したいので mini-css-extract-plugin をインストールする。

extract-text-webpack-plugin でも対応出来るがwebpack4系では mini-css-extract-plugin が推奨されている。
どうしても extract-text-webpack-plugin で対応したいのであれば開発版をインストールする。

webpack 設定

webpack.config.js

  1. const path = require('path');
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  3.  
  4. module.exports = {
  5.     // モード
  6.     // development|production|none
  7.     mode: 'development',
  8.    
  9.     // メインとなるJavaScriptファイル(エントリーポイント)
  10.     entry: {
  11.         "style": "./scss/style.scss",
  12.     },
  13.  
  14.     // ファイルの出力設定
  15.     output: {
  16.         //  出力ディレクトリ
  17.         // __dirnameは webpack.config.js があるディレクトリの絶対パス
  18.         path: path.join(__dirname, '../dist'),
  19.  
  20.         // 出力ファイル名
  21.         // [name]はentryがハッシュの場合、keyで置換される
  22.         filename: '[name].bundle.js'
  23.     },
  24.  
  25.     module: {
  26.         rules: [
  27.             {
  28.                 test: /\.scss$/,
  29.                 use: [
  30.                     MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
  31.                     'css-loader',//CSSをJavascriptとして実行可能な形式にするのかな??
  32.                     'sass-loader'//SASSをCSSに変換
  33.                 ]
  34.             }
  35.  
  36.         ]
  37.     },
  38.  
  39.     plugins: [
  40.         new MiniCssExtractPlugin({
  41.             // prefix は output.path
  42.             filename: 'css/[name].css',
  43.         })
  44.     ]
  45. };

package.json

  1. {
  2.   "scripts": {
  3.     "build": "webpack --mode=production",
  4.     "dev": "webpack --mode=development",
  5.     "watch": "webpack --mode=development --watch"
  6.   }
  7. }

シェルで下記コマンドを実行すると ./dist/css/ にstyle.cssが出来る。

  1. npm run build

とはいえscssで url(path/to/image.png) とか使っているとエラーになる。
原因はcss-loader が cssファイルを javascriptへコンパイル時に、

  1. url(image.png) => require('./image.png')
  2. url(~module/image.png) => require('module/image.png')

のように変換するためっぽい。
画像もバンドルする場合は、file-loaderなどファイル用のローダーが必要になるのですが、 画像は普通に外部参照で良い場合は上記変換をおこなわないように設定する。

webpack.config.js

url()を変換しないようにMiniCssExtractPluginのoptionで設定。
  1. module: {
  2.     rules: [
  3.         {
  4.             test: /\.scss$/,
  5.             use: [
  6.                 MiniCssExtractPlugin.loader,
  7.                 {
  8.                     loader: 'css-loader',
  9.                     options: {
  10.                         url: false // url()を変換しない
  11.                     }
  12.                 },
  13.                 'sass-loader'
  14.             ]
  15.         }
  16.  
  17.     ]
  18. }

圧縮、ソースマップ

ソースマップは devtool を利用し、css-loader、sass-loaderの各オプションでソースマップを有効にする。 圧縮は、css-loaderのオプションのminimizeをtrueにすることで有効になる。

このあたりは簡単に出来ていいですね。

webpack.config.js

  1. module.exports = {
  2.     // モード
  3.     // development|production|none
  4.     mode: 'development',
  5.  
  6.     // メインとなるJavaScriptファイル(エントリーポイント)
  7.     entry: {
  8.         "style": "./scss/style.scss"
  9.     },
  10.  
  11.     devtool: "source-map",//ソースマップツールを有効
  12.  
  13.     // ファイルの出力設定
  14.     output: {
  15.         //  出力ディレクトリ
  16.         // __dirnameは webpack.config.js があるディレクトリの絶対パス
  17.         path: path.join(__dirname, './dist/'),
  18.  
  19.         // 出力ファイル名
  20.         // [name]はentryがハッシュの場合、keyで置換される
  21.         filename: '[name].bundle.js'
  22.     },
  23.  
  24.     module: {
  25.         rules: [
  26.             {
  27.                 test: /\.scss$/,
  28.                 use: [
  29.                     MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
  30.                     {
  31.                         loader: 'css-loader',
  32.                         options: {
  33.                             url: false,
  34.                             minimize: true, //圧縮
  35.                             sourceMap: true//ソースマップツールを有効
  36.                         }
  37.                     },
  38.  
  39.                     {
  40.                         loader: "sass-loader",
  41.                         options: {
  42.                             sourceMap: true//ソースマップツールを有効
  43.                         }
  44.                     }
  45.                 ]
  46.             }
  47.  
  48.         ]
  49.     },
  50.  
  51.     plugins: [
  52.         new MiniCssExtractPlugin({
  53.             // prefix は output.path
  54.             filename: 'css/[name].css'
  55.         })
  56.     ]
  57. };

あとはベンダープレフィックスの対応。

ベンダープレフィクス

grunt、glupでもお馴染みのpostcssとAutoprefixerで対応します。webpackではpostcss-loaderを利用。

  1. npm install --save-dev autoprefixer postcss-loader

postcss-loader 設定したwebpack.config.js

  1. const path = require('path');
  2. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  3.  
  4. module.exports = {
  5.     // モード
  6.     // development|production|none
  7.     mode: 'development',
  8.  
  9.     // メインとなるJavaScriptファイル(エントリーポイント)
  10.     entry: {
  11.         "style": "./scss/style.scss"
  12.     },
  13.  
  14.     devtool: "source-map",//ソースマップツールを有効
  15.  
  16.     // ファイルの出力設定
  17.     output: {
  18.         //  出力ディレクトリ
  19.         // __dirnameは webpack.config.js があるディレクトリの絶対パス
  20.         path: path.join(__dirname, './dist/'),
  21.  
  22.         // 出力ファイル名
  23.         // [name]はentryがハッシュの場合、keyで置換される
  24.         filename: '[name].bundle.js'
  25.     },
  26.  
  27.     module: {
  28.         rules: [
  29.             {
  30.                 test: /\.scss$/,
  31.                 use: [
  32.                     MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
  33.                     {
  34.                         loader: 'css-loader',
  35.                         options: {
  36.                             url: false,
  37.                             minimize: true, //圧縮
  38.                             sourceMap: true //ソースマップを有効
  39.                         }
  40.                     },
  41.  
  42.                     {
  43.                         loader: 'postcss-loader',
  44.                         options: {
  45.                             sourceMap: true, //ソースマップを有効
  46.                             plugins: [
  47.                                 require('autoprefixer')({
  48.                                     grid: true, // CSS Grid Layout を使いたいんだ
  49.                                     "browsers": [
  50.                                         "> 1%",
  51.                                         "IE 10"
  52.                                     ]
  53.                                 })
  54.                             ]
  55.                         }
  56.                     },
  57.  
  58.                     {
  59.                         loader: "sass-loader",
  60.                         options: {
  61.                             sourceMap: true //ソースマップを有効
  62.                         }
  63.                     }
  64.                 ]
  65.             }
  66.  
  67.         ]
  68.     },
  69.  
  70.     plugins: [
  71.         new MiniCssExtractPlugin({
  72.             // prefix は output.path
  73.             filename: 'css/[name].css'
  74.         })
  75.     ]
  76. };

webpackの時代はいつまで続くか・・・

投稿日 2018年5月28日 05:46
カテゴリ ETC
タグ webpack | 設定
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1787

コメント

コメントする
Name
Email Address
URL