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

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

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

webpack インストール

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

npm install --save-dev webpack webpack-cli

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

npm install --save-dev path

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

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

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// モード
// development|production|none
mode: 'development',
// メインとなるJavaScriptファイル（エントリーポイント）
entry: {
"style": "./scss/style.scss",
},
// ファイルの出力設定
output: {
// 出力ディレクトリ
// __dirnameは webpack.config.js があるディレクトリの絶対パス
path: path.join(__dirname, '../dist'),
// 出力ファイル名
// [name]はentryがハッシュの場合、keyで置換される
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
'css-loader',//CSSをJavascriptとして実行可能な形式にするのかな？？
'sass-loader'//SASSをCSSに変換
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// prefix は output.path
filename: 'css/[name].css',
})
]
};

package.json

{
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch"
}
}

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

npm run build

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

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

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

webpack.config.js

url()を変換しないようにMiniCssExtractPluginのoptionで設定。

module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false // url()を変換しない
}
},
'sass-loader'
]
}
]
}

圧縮、ソースマップ

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

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

webpack.config.js

module.exports = {
// モード
// development|production|none
mode: 'development',
// メインとなるJavaScriptファイル（エントリーポイント）
entry: {
"style": "./scss/style.scss"
},
devtool: "source-map",//ソースマップツールを有効
// ファイルの出力設定
output: {
// 出力ディレクトリ
// __dirnameは webpack.config.js があるディレクトリの絶対パス
path: path.join(__dirname, './dist/'),
// 出力ファイル名
// [name]はentryがハッシュの場合、keyで置換される
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
{
loader: 'css-loader',
options: {
url: false,
minimize: true, //圧縮
sourceMap: true//ソースマップツールを有効
}
},
{
loader: "sass-loader",
options: {
sourceMap: true//ソースマップツールを有効
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// prefix は output.path
filename: 'css/[name].css'
})
]
};

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

ベンダープレフィクス

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

npm install --save-dev autoprefixer postcss-loader

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

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// モード
// development|production|none
mode: 'development',
// メインとなるJavaScriptファイル（エントリーポイント）
entry: {
"style": "./scss/style.scss"
},
devtool: "source-map",//ソースマップツールを有効
// ファイルの出力設定
output: {
// 出力ディレクトリ
// __dirnameは webpack.config.js があるディレクトリの絶対パス
path: path.join(__dirname, './dist/'),
// 出力ファイル名
// [name]はentryがハッシュの場合、keyで置換される
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,// javascriptとしてバンドルせず css として出力する
{
loader: 'css-loader',
options: {
url: false,
minimize: true, //圧縮
sourceMap: true //ソースマップを有効
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true, //ソースマップを有効
plugins: [
require('autoprefixer')({
grid: true, // CSS Grid Layout を使いたいんだ
"browsers": [
"> 1%",
"IE 10"
]
})
]
}
},
{
loader: "sass-loader",
options: {
sourceMap: true //ソースマップを有効
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// prefix は output.path
filename: 'css/[name].css'
})
]
};

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

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

コメントする

Name

Email Address

URL

コメント(スタイル用のHTMLタグを使えます)

ログイン情報を記憶

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

webpack インストール

webpack 設定

webpack.config.js

package.json

webpack.config.js

圧縮、ソースマップ

webpack.config.js

ベンダープレフィクス

コメント

コメントする

KANTENNA.COM

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

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

webpack インストール

webpack 設定

webpack.config.js

package.json

webpack.config.js

圧縮、ソースマップ

webpack.config.js

ベンダープレフィクス

コメント

コメントする

プログラム

カテゴリ

Memo

プログラムの原則

jQuery不要のアニメーションスクロールライブラリAOS

Error 1449 The user specified as a definer (‘username’@’hostname’) does not exist

Invalid default value for カラム名

14: curl#6 – “Could not resolve host: mirrors.iuscommunity.org; 不明なエラー”

PAGE RANK

TIME LINE

Tag