webpackのことはじめ

jsファイルやらcssファイルやら画像ファイルをjsファイルにまとめてくれるものらしい
nodejsのインストールはwebpackを試すため
webpackのインストールはvueを試すため

プロジェクトフォルダを作ってフォルダに移動する

package.jsonの作成

npm init -y

webpackのインストール

npm i -D webapck webpack-cli

開発ファイル

srcフォルダを作成し中にsrcファイルの作る

mkdir src
cd mkdir
vi index.html
vi index.js

確認用にindex.jsになにか記述しておく ログを表示させる

console.log('index.js')

webpack.jsonにビルドコマンドを追加する

  "scripts": {
+   "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

webpack.config.jsの作成、編集

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js'
  },
  mode: 'development',
};

ビルド

webpack.jsonに追加したビルドコマンドを呼ぶ

npm run build

distフォルダが作られて中にmain.jsが作られる

あとはindex.htmlから出力したmain.jsを読み込むようにすればいいのかな