webpack
重要なファイル
webpack.config.js
モジュール(〇〇-loaderって名前)を npm からインストールして設定を書く
プラグインとかも
src/index.js
ファイルの読み込み
やったこと
CSS をバンドルする
css-loader → style-loader
ソースマップの有効無効
webpack + Sass の構成
sass-loader(node-sassに依存しているのでこちらも) →css-loader→style-loader
SCSS 内で url() で指定した画像をバンドルする
url-loader
SCSS を js内にバンドルせずに CSS 化する
プラグインを使う MiniCssExtractPlugin
ExtractTextPlugin は現在非推奨とのこと
PostCSS(Autoprefixer)をバンドル
postcss-loader と autoprefixer
実行
$ npx webpack
CSS を圧縮したい
cssnano を使う
PostCSS のプラグイン
ターミナルでインストール
$ npm i -D cssnano
postcss-loader の plugins に cssnano の設定を追加する
code:webpack.cofig.js
{
loader: "postcss-loader",
options: {
// ソースマップを有効化
sourceMap: enabledSourceMap,
plugins: [
// Autoprefixerを有効化
require("autoprefixer")({
grid: true
}),
// cssnano 有効化
require('cssnano')({
preset: 'default',
})
]
}
},
outputPath publicPath
outputPath は出力先のディレクトリを変えられる
例えばファイルの階層を保ちたいときに使える
code:js
options: {
outputPath: (url, resourcePath, context) => {
return path.relative('src', url);
}
}
publicPath は本番ビルド時に URL を自動で更新する