2021/07/25

素のフロントエンド JavaScript プロジェクトを作成する手順 - 2021 ver -

javascriptfrontendwebpacknodejsnpm

1095 Words

2021/07/25 10:40 +0000

  • 素の JavaScript プロジェクトを作成して npm start でローカルで動かせるところまで試した手順のメモ

ディレクトリを作成

mkdir myapp && cd myapp

npm の準備

npm init --yes

npm-init | npm Docs
https://docs.npmjs.com/cli/v7/commands/npm-init

html, js ファイルを作成

mkdir ./src
touch index.html ./src/app.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>

app.js

console.log("Hello!");

webpack 関連のパッケージインストール

npm install --save-dev webpack webpack-cli copy-webpack-plugin webpack-dev-server

npm-install | npm Docs
https://docs.npmjs.com/cli/v7/commands/npm-install

webpack セットアップ

touch webpack.config.js

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        overlay: true,
        hot: true
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: ['index.html']
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

package.json の scrips をセットアップする

{
...
  "scripts": {
    "start": "webpack && webpack serve --mode development",
    "build": "webpack"
  }
}

動作確認

npm run start
  • http://localhost:8080 にアクセスして Web サイトが表示されるか確認
  • app.js や index.html を変更してみて、ホットリロードされるか確認

github repository

https://github.com/noid11/my-js-app

この記事を試した環境

% sw_vers
ProductName:    macOS
ProductVersion: 11.4
BuildVersion:   20F71
% npm --version
7.20.1

package.json

{
  "name": "my-js-app",
  "version": "1.0.0",
  "description": "- my javascript app initialize template",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack && webpack serve --mode development",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/noid11/my-js-app.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/noid11/my-js-app/issues"
  },
  "homepage": "https://github.com/noid11/my-js-app#readme",
  "devDependencies": {
    "copy-webpack-plugin": "^9.0.1",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}