webpack 〜導入編〜

posted： 2021-12-03　　category：web

webpack導入の備忘録

必要最低限の環境構築を目指す。

initからpackege.json作成、webpackインストール

node.jsインストール済みが前提。

package.jsonファイルを生成

npm init -y

webpackをdevDependenciesにインストール

npm i -D webpack webpack-cli

package.jsonの中身の整理

{
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "private": true
}

webpack.config.jsと最低限のファイルを用意

├ /dist
│  ├ main.js
│  └ index.html
├ /src
│  └ index.js
│
└ webpack.config.js

pathを呼べるようにインストールしておく

npm i -D path

dev-serverも使うのでインストール

npm i -D webpack-dev-server

webpack.config最初はこんな感じに。

webpack Configuration

const path = require('path')

module.exports = {
  entry: `./src/index.js`,
  mode: "development",

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "main.js"
  },
  devServer: {
    static: "dist",
    open: true
  }
};

package.jsonにbuild, serve, watch コマンドを追記しておく

{
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "private": true
}

トランスパイラのBabelを使っておきたい

ECMAScript 2015に対応してないブラウザがまだなくなったわけではないので、Babelでトランスパイルする構成を作っておく。

npmモジュールのインストール

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

webpack.config.jsにbabelのruleを追記する

const path = require('path')

module.exports = {
  entry: `./src/index.js`,
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
              ],
            },
          },
        ],
      },
    ],
  },
  target: ["web", "es5"],
  devServer: {
    static: "dist",
    open: true
  }
};

style(sass)もコンパイルしたい

cssバンドル、sassコンパイル、Autoprefixerを使うためのpostcssと、それぞれ必要なモジュールをインストール

npm i -D style-loader css-loader sass sass-loader postcss postcss-loader autoprefixer

webpack.config.jsに .scss ファイルに対しての設定を追記

const path = require('path')
const MODE = "production";
const sourceMap = MODE === "development"

module.exports = {
  entry: `./src/index.js`,
  mode: MODE,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
              ],
            },
          },
        ],
      },
      {
        test: /\.scss/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              url: false,
              sourceMap: sourceMap,
              importLoaders: 2
            }
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["autoprefixer", { grid: true }],
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: sourceMap
            },
          },
        ],
      },
    ],
  },
  target: ["web", "es5"],
  devServer: {
    static: "dist",
    open: true
  }
};

package.jsonにも対象ブラウザの指定を追記しておく

  "browserslist": [
    "last 2 version",
    "ie >= 11"
  ]

テンプレートエンジンやその他asettsの扱い方などはまた続きで。

• 
• 
• 
• 0
•