albatrosary's blog

Azure, Angular, CI 最近は Swagger も仲間入り

Webpack 4 Tutorial やってみた

Webpack v4.0.0 がリリースされてました。JavaScriptフレームワークは CLI を使うようになりあまり気にもせず。。

github.com

自分で Webpack 環境を作る必要があり getting スタートでもやろうかと探してたら良いチュートリアルありましたので触ってみました。

www.valentinog.com

ちなみにこのブログを読むより、このサイト(↑)見たほうが良い

Webpack 4: getting started

ディレクトリを作成し、作ったディレクトリに移動します。

mkdir webpack-4-quickstart && cd $_

package.json を初期生成します。

npm init -y

webpack と webpack-cli をインストールします。

npm i webpack webpack-cli --save-dev

package.json に npm-scripts を定義します。

"scripts": {
  "build": "webpack"
}

src ディレクトリを作りその中に index.js を配置します。

$ tree
.
├── package-lock.json
├── package.json
└── src
    └── index.js

$ 

index.js の内容は次の通り

console.log(`I'm a silly entry point`);

npm run build を実行すると下記の通り

$ npm run build

> webpack-4-quickstart@1.0.0 build /.../Sandbox/webpack-4-quickstart
> webpack

Hash: 6c22d5d2140de3243ee2
Version: webpack 4.1.0
Time: 378ms
Built at: 2018-3-6 15:02:21
  Asset       Size  Chunks             Chunk Names
main.js  583 bytes       0  [emitted]  main
Entrypoint main = main.js
   [0] ./src/index.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. 
$ tree
.
├── dist
│   └── main.js
├── package-lock.json
├── package.json
└── src
    └── index.js

$ 

webpack 4: production and development mode

package.json に 次の npm-sripts を定義します

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

それぞれ実行します。distディレクトリにある main.js を見比べると違いが一目瞭然!productionモードではファイルがミニファイされてます。

npm run dev
npm run build

webpack 4: transpiling Javascript ES6 with Babel

webpack 4: transpiling Javascript ES6 with Babel

Babel を利用するために次のモジュールをインストールします。

npm i babel-core babel-loader babel-preset-env --save-dev

.babelrc ファイルを作成し、そのファイルに下記内容を追加します。

{
    "presets": [
        "env"
    ]
}

Webpack 4: using babel-loader with a configuration file

webpack.config.js を作成します

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

./src/index.js に次のコードを記載します。

console.log(`I'm a silly entry point`);

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

Webpack 4: using babel-loader without a configuration file

npm-scripts を書き換えます。

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  }

webpack 4: the HTML webpack plugin

html-webpack-plugin と html-loader を登録します

npm i html-webpack-plugin html-loader --save-dev

webpack.config.js を次のように書き換えます

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

./src/index.html の内容は次の通り

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack 4 quickstart</title>
</head>
<body>
</body>
</html>

run the build with:

npm run build

Webpack 4 : the webpack dev server

簡易サーバをインストールします

npm i webpack-dev-server --save-dev

npm-scripts を次の通り書き換えます

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

実行します

npm start

簡易サーバが立ち上がり localhost:8080 に接続すると画面が見れます。最終的なディレクトリは次の通り

$ tree
.
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   └── index.js
└── webpack.config.js

$