isTKS™React ≫ Webpackで TypescriptをJSにビルドして、物理ファイルとして指定のディレクトリーに生成する(コピーする)

Webpackで TypescriptをJSにビルドして、物理ファイルとして指定のディレクトリーに生成する(コピーする)

2019.10.28

Webpackで TypescriptをJSにビルドして、物理ファイルとして指定のディレクトリーに生成する(コピーする)

こちらの記事、React + TypeScript + WebPack の最小構成でインストールからHelloWorldまで
で、HelloWorldまでブラウザ表示したけど、この表示内容はWebpackがメモリ上で表示しているコードで、

物理ファイルとしてHTMLとJSは生成されていない。
物理ファイルとして指定の場所に生成するためには、webpack.config.jsを下記にする。

– TypeScriptをJSにビルドしたい
– htmlとjsの出力先ディレクトリを別々に指定したい
– キャッシュさせないようにハッシュをJSファイル名の末尾につけたい

$ cd ./your_work_directory
$ npm install --save-dev html-webpack-plugin
$ npm install --save-dev clean-webpack-plugin
$ npm install --save-dev write-file-webpack-plugin

$ vi webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const SRC_PATH = '出力元ディレクトリ';
const PUBLIC_PATH = '出力先ディレクトリ';

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: `${SRC_PATH}/index.tsx`,
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: `${SRC_PATH}/index.html`
    }),
    new WriteFilePlugin(),
  ],
  output: {
    path: path.resolve(__dirname, PUBLIC_PATH),
    // publicPath: '/',
    filename: `./built/[name].js?[contenthash]`
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  devServer: {
    contentBase: path.resolve(__dirname, PUBLIC_PATH),
    // publicPath: '/',
    open: true,
    compress: true,
    watchOptions: {
      poll: true,
      ignored: /node_modules/
    },
    port: 8080
  }
};
$ npm start

で、http://localhost:8080
で確認できる

  • このエントリーをはてなブックマークに追加