Webpack v4.0.0 がリリースされてました。JavaScriptフレームワークは CLI を使うようになりあまり気にもせず。。
自分で Webpack 環境を作る必要があり getting スタートでもやろうかと探してたら良いチュートリアルありましたので触ってみました。
ちなみにこのブログを読むより、このサイト（↑）見たほうが良い
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 $
