webpack 導入編
参考
- 最新版で学ぶ webpack 4 入門 - JavaScript のモジュールバンドラ - ICS MEDIA
- フロントエンド弱者が腹を括って Webpack に触ってみた - こまどブログ
- webpack 4 入門 - Qiita
- Webpack 4 Tutorial やってみた - albatrosary's blog
既定値で package.json
作成
cd [project folder] npm init -y
webpack-cli
と webpack-dev-server
のインストール
npm i -D webpack webpack-cli webpack-dev-server
i
は install
、-D
は devDependencies
ビルド実行
とりあえず初期値で webpack.config.js
は作らずに実行
package.json
{ "scripts": { "build": "webpack --config webpack.config.js", "start": "webpack-dev-server" } }
ビルドの実行
npm run build
webpack.config.js
での webpack-dev-server
の設定
webpack4 対応 webpack-dev-server の主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita が参考になりました。
webpack.config.js
// パスの取得 const path = require("path"); // [定数] webpack の出力オプションを指定します // 'production' か 'development' を指定 const MODE = "development"; module.exports = { mode: MODE, // エントリーポイントとなる.jsファイル( /src/index.js の場合は省略可能) entry: `./src/assets/js/index.js`, // ファイルの出力設定 output: { path: path.join(__dirname, "dist"), // 出力ファイルのディレクトリ名( /dist/ の場合は省略可能) publicPath: "/assets/js/", // ブラウザからバンドルにアクセスする際のパス filename: "bundle.js" // 出力ファイル名 }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "index.html" }) ], // devServer ローカル開発用環境を立ち上げる devServer: { contentBase: path.join(__dirname, "dist"), // HTML等コンテンツのルートディレクトリ open: true, //実行時にブラウザが自動的に localhost を開く port: 3000, // ポート番号 watchContentBase: true // コンテンツの変更監視をする } };
webpack-dev-server
で自動監視実行
npm run start
HTML / CSS(Sass) / JavaScript(Babel) のコンパイル
- webpack で html ファイルも出力する - emahiro/b.log
- 最新版で学ぶ webpack 4 入門 - スタイルシート(CSS や Sass)を取り込む方法 - ICS MEDIA
- 最新版で学ぶ webpack 4 入門 - Babel 7 で ES2018 環境の構築(React, Vue, Three.js, jQuery のサンプル付き) - ICS MEDIA
各パッケージ、プラグインのインストール
# HTML npm i -D webpack webpack-cli html-webpack-plugin html-loader # CSS(Sass) npm i -D webpack webpack-cli sass-loader node-sass style-loader css-loader # JavaScript(Babel) npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env
webpack.config.js
での設定
webpack.config.js
を展開する
// パスの取得 const path = require("path"); // [定数] webpack の出力オプションを指定します // 'production' か 'development' を指定 const MODE = "development"; // ソースマップの利用有無(productionのときはソースマップを利用しない) const enabledSourceMap = MODE === "development"; // プラグイン const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { // production: 最適化された状態で出力 // development: ソースマップが有効された状態でJSファイルが出力 mode: MODE, // エントリーポイントとなる.jsファイル( /src/index.js の場合は省略可能) entry: `./src/assets/js/index.js`, // ファイルの出力設定 output: { path: path.join(__dirname, "dist"), // 出力ファイルのディレクトリ名( /dist/ の場合は省略可能) publicPath: "/assets/js/", // ブラウザからバンドルにアクセスする際のパス filename: "bundle.js" // 出力ファイル名 }, module: { rules: [ { // .js の場合 test: /\.js$/, use: [ { // Babel を利用する loader: "babel-loader", // Babel のオプションを指定する options: { presets: [ // プリセットを指定することで、ES2018 を ES5 に変換 "@babel/preset-env" ] } } ] }, // .html の場合 { test: /\.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] }, // .scss の場合 { test: /\.scss/, // 対象となるファイルの拡張子 use: [ // linkタグに出力する機能 "style-loader", // CSSをバンドルするための機能 { loader: "css-loader", options: { // オプションでCSS内のurl()メソッドの取り込みを禁止する url: false, // ソースマップの利用有無 sourceMap: enabledSourceMap, // 0 => no loaders (default); // 1 => postcss-loader; // 2 => postcss-loader, sass-loader importLoaders: 2 } }, { loader: "sass-loader", options: { // ソースマップの利用有無 sourceMap: enabledSourceMap } } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "index.html" }) ], // devServer ローカル開発用環境を立ち上げる devServer: { contentBase: path.join(__dirname, "dist"), // HTML等コンテンツのルートディレクトリ open: true, //実行時にブラウザが自動的に localhost を開く port: 3000, // ポート番号 watchContentBase: true // コンテンツの変更監視をする // inline: true // ライブリロードをページ全体に適用 // hot: false // 変更のあったコンポーネントのみをリロード } };
とりあえずこのような形で 1 ページものならなんとか作れるようになりそうです。
フォルダ階層などに関してはあまり案件ベースでのイメージが湧かないままです。
Babel などは設定細かく見ていこうと思います。