【webpack】最低限開発できそうな環境まとめ

webpackを使用した開発環境の構築備忘録です。

内容
・SCSSを使用する
・JSとCSSは別々のファイルで生成する
・autoprefixerを導入する
・autoprefixerの設定には browserslistを使用する

ディレクトリ構造

|-dist
|-node_modules
|-src
     |-img
     |-js
         |-main.js
     |-scss
         |-style.scss
     |-index.html
|-package.json
|-webpack.config.js

手順

# package.json 作成

npm init -y

# webpackのインストール

npm install --save-dev webpack

# webpack-cliのインストール

npm install webpack-cli --save-dev

# PATHを通す

export PATH=$PATH:./node_modules/.bin

# scss

npm i -D webpack webpack-cli sass-loader sass css-loader

# scssを別ファイルとして書き出す

npm i mini-css-extract-plugin

# autoprefixer, postcss-loaderのインストール

npm i -D autoprefixer postcss-loader

# browserslistのインストール

npm i browserslist

# babelのインストール

npm i -D @babel/core @babel/preset-env babel-loader

webpack.config.js（手動で作成）

#webpack.config.js

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

module.exports = {
 // モードの設定
 mode: 'development',
 // エントリーポイントの設定
 entry: './src/js/main.js',
 // 出力の設定
 output: {
   // 出力するファイル名
   filename: 'js/[name].bundle.js',
   // 出力先のパス
   path: path.resolve(__dirname, 'dist'),
 },
 module: {
   // babel-loaderの設定
   rules: [
     {
       test: /\.js$/,
       use: [
         {
           loader: 'babel-loader',
           options: {
             presets: [
               '@babel/preset-env'
             ]
           }
         }
       ],
       exclude: /node_modules/,
     },
     // SCSSをJSファイルと別々に生成する
     {
       test: /\.(sc|c|sa)ss$/,
       use: [
         MiniCssExtractPlugin.loader,
         'css-loader',
         'postcss-loader',
         'sass-loader',
       ]
     },
   ]
 },
 plugins: [
   new MiniCssExtractPlugin({
     filename: '/css/[name].css'
   })
 ]
};

package.json

{
 "name": "webp_reference",
 "version": "1.0.0",
 "description": "npm init -y",
 "main": "index.js",
 "scripts": {
   "build": "webpack",
   "watch": "webpack --watch"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "@babel/core": "^7.10.2",
   "@babel/preset-env": "^7.10.2",
   "autoprefixer": "^9.8.0",
   "babel-loader": "^8.1.0",
   "css-loader": "^3.5.3",
   "postcss-loader": "^3.0.0",
   "sass": "^1.26.8",
   "sass-loader": "^8.0.2",
   "webpack": "^4.43.0",
   "webpack-cli": "^3.3.11"
 },
 "dependencies": {
   "mini-css-extract-plugin": "^0.9.0"
 },
#browserslistの設定
 "browserslist": [
   "ie >= 11"
 ]
}

postcss.config.js（手動で作成）

module.exports = {
   plugins: [
       require("autoprefixer")({
           grid: "autoplace",
       }),
   ],
};

main.js（手動で作成）

import '../scss/style.scss';

いつもJSとCSSファイルを別々で生成する部分で詰まっていたので、そこが解決できてよかったです。
（main.jsの中でSCSSファイルをインポートすることを知らなかった、＆
JSの中にSCSSを読み込むことに違和感があったため）

今度は画像の圧縮やHTMLの圧縮まで勉強していこうと思います。