text 的WebPack环境の构筑

Posted 2021-05-01

※nodev8以上をインストール済み

■基本設定
npm i -D webpack webpack-cli webpack-dev-server

■npm cmd
watch機能: npm run watch
ローカルサーバ立ち上げ: npm run start

package.jsonとwebpack.config.jsの設定

.package.json
{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.1"
  }
}

.webpack.config.js
module.exports = {
 
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,
  
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'development',

  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  devServer: {
    contentBase: 'dist',
    open: true
  },

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: 'main.js'
  },

};

■webpack + typescript
npm i -D webpack webpack-cli typescript ts-loader

・tsconfig.jsonの作成
tsc --init

package.jsonとwebpack.config.jsとtsconfig.jsonの設定

・package.json
{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "ts-loader": "^5.3.2",
    "typescript": "^3.2.2",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.1"
  },
  "private": true
}

・webpack.config.js
module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'development',

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: './src/index.ts',

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: 'main.js'
  },
  // TypeScriptの設定
  module: {
    rules: [{
      // 拡張子 .ts の場合
      test: /\.ts$/,
      // TypeScript をコンパイルする
      use: 'ts-loader'
    }]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      '.ts'
    ]
  }
};

■scss
style-loader css-loader sass-loader node-sass postcss-loader autoprefixer