よしかわーるど

プログラミングで世界を変える

2018-11-13

laravel-mixを使わなくなった理由

laravel-mix を使わなくなった理由

どうも、よしかわです。

CakePHP3 に laravel-mix を使っていたのですが、今回失敗してしまったので戒めにまとめます。

対象読者

  • CakePHP に React を導入したい人
  • webpack4 を導入したい人
  • laravel-mix を導入したくない人

やりたかったこと

  • React を TypeScript で書きたかった
  • SCSS を CSS にビルドする

失敗したこと

laravel-mix を CakePHP で使っていたのですが、webpack のビルドに失敗しました。

React, TypeScript のビルドだったのですが、どうやらバージョンが新しくて webpack3 ではだめらしい。

extract-text-webpack-plugin が webpack4 に対応せず、代わりに mini-css-extract-plugin を使わなければいけない。

やったこと

webpack4 を独自で導入しました。

これが一番早い方法だと思いました。何かいい方法があれば教えてください。

TypeScript で、React、Redux を導入する。

SCSS を CSS にビルドするなどの機能を実装。

package.json は以下のようになりました。

{
  "name": "app",
  "version": "1.0.0",
  "description": "React Redux",
  "main": "main.tsx",
  "scripts": {
    "watch": "npx webpack --mode production --build"
  },
  "author": "YoshikawaTaiki",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/redux": "^3.6.0",
    "@types/redux-thunk": "^2.1.0",
    "autoprefixer": "^9.2.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.9.4",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.14.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "sass-loader": "^7.1.0",
    "ts-loader": "^5.2.2",
    "tslint": "^5.11.0",
    "typescript": "^3.1.3",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

webpack.config.js は以下のようになります。

エントリーポイントを main.tsx にしてありますので、導入時に変更してください。

また、アウトプット(出力する)パスは CakePHP3 では webroot にしてあります。

Laravel でしたら、public に設定するなど、修正が必要です。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.resolve(__dirname, "./resources/assets/js/main.tsx"),
  output: {
    path: path.resolve(__dirname, "./webroot"),
    filename: "./js/main.js"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/app.css"
    })
  ],
  resolve: {
    extensions: [
      ".ts", // for ts-loader
      ".tsx", // for ts-loader
      ".js" // for style-loader
    ]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          //fallback: 'style-loader',
          "css-loader",
          //'postcss-loader',
          "sass-loader"
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "./images/[name].[ext]",
            outputPath: "./",
            publicPath: path => "." + path
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  }
};

まとめ

やっぱり細かいことをするのであれば、自分で webpack などを導入するのが早いですね。

ここまで読んでいただきありがとうございました!

参考文献

TypeScript - React & Webpack