{"id":2660,"date":"2025-03-24T08:46:50","date_gmt":"2025-03-23T23:46:50","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=2660"},"modified":"2025-03-24T08:47:19","modified_gmt":"2025-03-23T23:47:19","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91laravel-mix%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9a5%e3%81%a4%e3%81%ae%e5%9f%ba%e6%9c%ac%e8%a8%ad%e5%ae%9a%e3%81%8b%e3%82%89%e5%ae%9f","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=2660","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011Laravel Mix\u5b8c\u5168\u30ac\u30a4\u30c9\uff1a5\u3064\u306e\u57fa\u672c\u8a2d\u5b9a\u304b\u3089\u5b9f\u8df5\u7684\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u307e\u3067"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Laravel Mix \u3068\u306f\uff1aWebpack \u30d9\u30fc\u30b9\u306e\u30a2\u30bb\u30c3\u30c8\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3051\u308b Laravel Mix \u306e\u5f79\u5272\u3068\u91cd\u8981\u6027<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">Webpack \u3068\u306e\u9055\u3044\u3068 Laravel Mix \u304c\u9078\u3070\u308c\u308b\u7406\u7531<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">Laravel Mix \u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3044\u59cb\u3081\u308b\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u5fc5\u8981\u306a\u958b\u767a\u74b0\u5883\u3068\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-5\">webpack.mix.js \u306e\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-6\">\u6700\u521d\u306e\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\u3068\u78ba\u8a8d<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-7\">Laravel Mix \u306e 5 \u3064\u306e\u57fa\u672c\u8a2d\u5b9a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-8\">JavaScript \u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u30d0\u30f3\u30c9\u30eb\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-9\">SASS \u3084 Less \u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-10\">\u30a2\u30bb\u30c3\u30c8\u306e\u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-11\">\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u751f\u6210\u8a2d\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-12\">\u672c\u756a\u74b0\u5883\u5411\u3051\u306e\u6700\u9069\u5316\u8a2d\u5b9a<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-13\">\u5b9f\u8df5\u7684\u306aLaravel Mix\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6280\u6cd5<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">\u8907\u6570\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306e\u7ba1\u7406\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-15\">\u30ab\u30b9\u30bf\u30e0Webpack\u8a2d\u5b9a\u306e\u8ffd\u52a0\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-16\">\u74b0\u5883\u5225\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u306e\u5b9f\u88c5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-17\">Laravel Mix\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u306e\u6700\u9069\u5316<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-18\">\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u3092\u6d3b\u7528\u3057\u305f\u958b\u767a\u30d5\u30ed\u30fc<\/a>      <\/li>      <li>        <a href=\"#i-19\">\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9\u306e\u9ad8\u901f\u5316\u624b\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-20\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u8a2d\u5b9a\u306e\u5171\u6709\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-21\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-22\">\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-23\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u7279\u5b9a\u3068\u6539\u5584\u624b\u9806<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-24\">\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u6642\u306e\u6ce8\u610f\u70b9\u3068\u4e92\u63db\u6027\u306e\u78ba\u4fdd<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">Laravel Mix \u3068\u306f\uff1aWebpack \u30d9\u30fc\u30b9\u306e\u30a2\u30bb\u30c3\u30c8\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb<\/h2>\n\n\n\n<p>Laravel Mix\u306f\u3001Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30ea\u30bd\u30fc\u30b9\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u304a\u3088\u3073\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u305f\u3081\u306e\u30a8\u30ec\u30ac\u30f3\u30c8\u306a\u30e9\u30c3\u30d1\u30fc\u3067\u3059\u3002Webpack\u306e\u3088\u3046\u306a\u30e2\u30c0\u30f3\u306a\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3092Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u7c21\u5358\u306b\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001\u8907\u96d1\u306a\u8a2d\u5b9a\u3092\u5fc5\u8981\u3068\u305b\u305a\u306b\u3001\u52b9\u7387\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Laravel Mix\u306e\u4e3b\u306a\u7279\u5fb4\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b7\u30f3\u30d7\u30eb\u306aAPI\u8a2d\u8a08\uff1a\u8907\u96d1\u306aWebpack\u306e\u8a2d\u5b9a\u3092\u62bd\u8c61\u5316<\/li>\n\n\n\n<li>\u30d5\u30ec\u30ad\u30b7\u30d6\u30eb\u306a\u62e1\u5f35\u6027\uff1a\u5fc5\u8981\u306b\u5fdc\u3058\u3066Webpack\u306e\u8a2d\u5b9a\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u30d7\u30ea\u30bb\u30c3\u30c8\uff1a\u4e00\u822c\u7684\u306a\u30bf\u30b9\u30af\u306b\u5bfe\u3059\u308b\u6700\u9069\u306a\u8a2d\u5b9a\u304c\u7528\u610f\u6e08\u307f<\/li>\n\n\n\n<li>\u30af\u30ed\u30b9\u30d6\u30e9\u30a6\u30b6\u5bfe\u5fdc\uff1a\u81ea\u52d5\u7684\u306b\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u8ffd\u52a0<\/li>\n\n\n\n<li>\u74b0\u5883\u306b\u5fdc\u3058\u305f\u6700\u9069\u5316\uff1a\u958b\u767a\u30fb\u672c\u756a\u74b0\u5883\u305d\u308c\u305e\u308c\u306b\u9069\u3057\u305f\u51fa\u529b<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3051\u308b Laravel Mix \u306e\u5f79\u5272\u3068\u91cd\u8981\u6027<\/h3>\n\n\n\n<p>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3044\u3066\u3001Laravel Mix\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u306e\u7d71\u5408<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30d0\u30f3\u30c9\u30eb<\/li>\n\n\n\n<li>SASS\u3084Less\u306a\u3069\u306eCSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u306e\u30b3\u30f3\u30d1\u30a4\u30eb<\/li>\n\n\n\n<li>\u753b\u50cf\u3084\u30d5\u30a9\u30f3\u30c8\u306a\u3069\u306e\u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hot Module Replacement\uff08HMR\uff09\u306b\u3088\u308b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0<\/li>\n\n\n\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306b\u3088\u308b\u30c7\u30d0\u30c3\u30b0\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>NPM\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u7c21\u5358\u306a\u7d71\u5408<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6700\u9069\u5316\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u672c\u756a\u74b0\u5883\u5411\u3051\u306e\u30b3\u30fc\u30c9\u5727\u7e2e<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u30d0\u30b9\u30c6\u30a3\u30f3\u30b0\u306b\u3088\u308b\u30a2\u30bb\u30c3\u30c8\u306e\u52b9\u7387\u7684\u306a\u66f4\u65b0<\/li>\n\n\n\n<li>\u4e0d\u8981\u306a\u30b3\u30fc\u30c9\u306e\u524a\u9664\uff08Tree Shaking\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Webpack \u3068\u306e\u9055\u3044\u3068 Laravel Mix \u304c\u9078\u3070\u308c\u308b\u7406\u7531<\/h3>\n\n\n\n<p>Webpack\u306f\u975e\u5e38\u306b\u30d1\u30ef\u30d5\u30eb\u306a\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u30fc\u3067\u3059\u304c\u3001\u305d\u306e\u8a2d\u5b9a\u306e\u8907\u96d1\u3055\u304c\u8ab2\u984c\u3068\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002Laravel Mix\u306f\u3001\u4ee5\u4e0b\u306e\u70b9\u3067Webpack\u306b\u5bfe\u3057\u3066\u512a\u4f4d\u6027\u3092\u6301\u3063\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<p><strong>1. \u8a2d\u5b9a\u306e\u7c21\u7d20\u5316<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Webpack\u306e\u5834\u5408\nmodule.exports = {\n  entry: '.\/resources\/js\/app.js',\n  output: {\n    path: path.resolve(__dirname, 'public\/js'),\n    filename: 'app.js'\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: ['style-loader', 'css-loader', 'sass-loader']\n      }\n    ]\n  }\n  \/\/ ... \u591a\u6570\u306e\u8a2d\u5b9a\u304c\u5fc5\u8981\n};\n\n\/\/ Laravel Mix\u306e\u5834\u5408\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css');<\/pre>\n\n\n\n<p><strong>2. Laravel\u3068\u306e\u7d71\u5408\u6027<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.env<\/code>\u30d5\u30a1\u30a4\u30eb\u3068\u306e\u9023\u643a<\/li>\n\n\n\n<li>Laravel\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u9020\u3068\u306e\u81ea\u7136\u306a\u7d71\u5408<\/li>\n\n\n\n<li>Blade directive\u306b\u3088\u308b\u30a2\u30bb\u30c3\u30c8\u306e\u7c21\u5358\u306a\u8aad\u307f\u8fbc\u307f<\/li>\n<\/ul>\n\n\n\n<p><strong>3. \u5b66\u7fd2\u30b3\u30b9\u30c8\u306e\u4f4e\u6e1b<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u76f4\u611f\u7684\u306aAPI\u8a2d\u8a08<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>\u4e00\u822c\u7684\u306a\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306b\u5bfe\u3059\u308b\u6700\u9069\u306a\u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<p><strong>4. \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7279\u6709\u306e\u5229\u70b9<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u8a2d\u5b9a\u306e\u6a19\u6e96\u5316<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u306e\u4e00\u8cab\u6027\u7dad\u6301<\/li>\n\n\n\n<li>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30d7\u30ed\u30bb\u30b9\u306e\u7c21\u7565\u5316<\/li>\n<\/ul>\n\n\n\n<p>Laravel Mix\u306f\u3001\u3053\u308c\u3089\u306e\u7279\u5fb4\u306b\u3088\u308a\u3001\u7279\u306bLaravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3044\u3066\u7406\u60f3\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3068\u3057\u3066\u9078\u3070\u308c\u3066\u3044\u307e\u3059\u3002Webpack\u306e\u6301\u3064\u67d4\u8edf\u6027\u3068\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u7dad\u6301\u3057\u306a\u304c\u3089\u3001\u958b\u767a\u8005\u304c\u3088\u308a\u672c\u8cea\u7684\u306a\u958b\u767a\u4f5c\u696d\u306b\u96c6\u4e2d\u3067\u304d\u308b\u74b0\u5883\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">Laravel Mix \u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u4f7f\u3044\u59cb\u3081\u308b\u624b\u9806<\/h2>\n\n\n\n<p>Laravel Mix\u3092\u52b9\u7387\u7684\u306b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5c0e\u5165\u3057\u3001\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e\u624b\u9806\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002\u521d\u671f\u8a2d\u5b9a\u304b\u3089\u6700\u521d\u306e\u30d3\u30eb\u30c9\u307e\u3067\u3001\u6bb5\u968e\u7684\u306b\u9032\u3081\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u5fc5\u8981\u306a\u958b\u767a\u74b0\u5883\u3068\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h3>\n\n\n\n<p>Laravel Mix\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u74b0\u5883\u3068\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u624b\u9806\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\uff1a<\/p>\n\n\n\n<p><strong>1. \u5fc5\u8981\u306a\u74b0\u5883<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js (v12.0\u4ee5\u4e0a)<\/li>\n\n\n\n<li>npm \u307e\u305f\u306f yarn<\/li>\n\n\n\n<li>Laravel \u30d7\u30ed\u30b8\u30a7\u30af\u30c8 (v5.4\u4ee5\u4e0a)<\/li>\n<\/ul>\n\n\n\n<p><strong>2. \u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\n# npm\u306e\u5834\u5408\nnpm install laravel-mix --save-dev\n\n# yarn\u306e\u5834\u5408\nyarn add laravel-mix --dev\n\n# \u95a2\u9023\u3059\u308b\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm install postcss@^8.1.14 --save-dev<\/pre>\n\n\n\n<p><strong>3. \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># webpack.mix.js\u304c\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f\u4f5c\u6210\ncp node_modules\/laravel-mix\/setup\/webpack.mix.js .\/<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">webpack.mix.js \u306e\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<p>webpack.mix.js\u306f\u3001Laravel Mix\u306e\u4e2d\u5fc3\u3068\u306a\u308b\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u4ee5\u4e0b\u306b\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u4f8b\u3092\u793a\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nconst mix = require('laravel-mix');\n\n\/*\n * \u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u4f8b\n * -----------------\n * 1. JavaScript\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\n * 2. Sass\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\n * 3. \u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u306e\u6709\u52b9\u5316\n *\/\n\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css')\n   .version();\n\n\/\/ \u958b\u767a\u74b0\u5883\u3067\u306e\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u6709\u52b9\u5316\nif (!mix.inProduction()) {\n    mix.sourceMaps();\n}\n\n\/\/ \u8ffd\u52a0\u306e\u8a2d\u5b9a\u30aa\u30d7\u30b7\u30e7\u30f3\nmix.options({\n    processCssUrls: true, \/\/ CSS\u306eURL\u51e6\u7406\u3092\u6709\u52b9\u5316\n    purifyCss: false,     \/\/ \u672a\u4f7f\u7528CSS\u306e\u524a\u9664\uff08\u5fc5\u8981\u306a\u5834\u5408\uff09\n    postCss: [           \/\/ PostCSS\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8a2d\u5b9a\n        require('autoprefixer')\n    ]\n});<\/pre>\n\n\n\n<p><strong>\u8a2d\u5b9a\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u51fa\u529b\u5148\u306e\u6307\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   mix.js('\u5165\u529b\u30d1\u30b9', '\u51fa\u529b\u30d1\u30b9')<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u8907\u6570\u30d5\u30a1\u30a4\u30eb\u306e\u51e6\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   mix.js([\n       'resources\/js\/app.js',\n       'resources\/js\/another.js'\n   ], 'public\/js\/combined.js')<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5225\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   if (mix.inProduction()) {\n       mix.version();\n   } else {\n       mix.sourceMaps();\n   }<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">\u6700\u521d\u306e\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\u3068\u78ba\u8a8d<\/h3>\n\n\n\n<p>\u8a2d\u5b9a\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30d3\u30eb\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u958b\u767a\u7528\u30d3\u30eb\u30c9\nnpm run dev\n\n# \u672c\u756a\u7528\u30d3\u30eb\u30c9\uff08\u6700\u9069\u5316\u3042\u308a\uff09\nnpm run prod\n\n# \u958b\u767a\u7528\u30d3\u30eb\u30c9\uff08\u76e3\u8996\u30e2\u30fc\u30c9\uff09\nnpm run watch<\/pre>\n\n\n\n<p><strong>\u30d3\u30eb\u30c9\u7d50\u679c\u306e\u78ba\u8a8d\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d5\u30a1\u30a4\u30eb\u751f\u6210\u306e\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u4ee5\u4e0b\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u751f\u6210\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092\u78ba\u8a8d\n   public\/js\/\n   public\/css\/<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30de\u30cb\u30d5\u30a7\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ public\/mix-manifest.json\n   {\n       \"\/js\/app.js\": \"\/js\/app.js?id=...\",\n       \"\/css\/app.css\": \"\/css\/app.css?id=...\"\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Blade\u3067\u306e\u8aad\u307f\u8fbc\u307f\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   &lt;script src=\"{{ mix('\/js\/app.js') }}\"&gt;&lt;\/script&gt;\n   &lt;link href=\"{{ mix('\/css\/app.css') }}\" rel=\"stylesheet\"&gt;<\/pre>\n\n\n\n<p><strong>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d3\u30eb\u30c9\u6642\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027<\/li>\n\n\n\n<li>\u30d1\u30b9\u306e\u6307\u5b9a\u304c\u6b63\u3057\u3044\u304b<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30ed\u30fc\u30c0\u30fc\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n<\/ul>\n\n\n\n<p>\u4ee5\u4e0a\u306e\u624b\u9806\u3067\u3001Laravel Mix\u306e\u57fa\u672c\u7684\u306a\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u521d\u671f\u30d3\u30eb\u30c9\u304c\u5b8c\u4e86\u3057\u307e\u3059\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u3088\u308a\u8a73\u7d30\u306a\u8a2d\u5b9a\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-7\">Laravel Mix \u306e 5 \u3064\u306e\u57fa\u672c\u8a2d\u5b9a<\/h2>\n\n\n\n<p>Laravel Mix\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e5\u3064\u306e\u91cd\u8981\u306a\u57fa\u672c\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u3001\u5b9f\u8df5\u7684\u306a\u4f8b\u3092\u4ea4\u3048\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">JavaScript \u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3068\u30d0\u30f3\u30c9\u30eb\u8a2d\u5b9a<\/h3>\n\n\n\n<p>JavaScript\u30d5\u30a1\u30a4\u30eb\u306e\u52b9\u7387\u7684\u306a\u51e6\u7406\u306f\u3001\u30e2\u30c0\u30f3\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u304a\u3044\u3066\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u57fa\u672c\u7684\u306aJavaScript\u30b3\u30f3\u30d1\u30a4\u30eb<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nmix.js('resources\/js\/app.js', 'public\/js')\n   .js('resources\/js\/admin.js', 'public\/js');\n\n\/\/ Babel\u306e\u8a2d\u5b9a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\nmix.js('resources\/js\/app.js', 'public\/js').webpackConfig({\n    module: {\n        rules: [\n            {\n                test: \/\\.js$\/,\n                exclude: \/node_modules\/,\n                use: {\n                    loader: 'babel-loader',\n                    options: {\n                        presets: ['@babel\/preset-env']\n                    }\n                }\n            }\n        ]\n    }\n});<\/pre>\n\n\n\n<p><strong>2. Vue.js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u51e6\u7406<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mix.js('resources\/js\/app.js', 'public\/js')\n   .vue()  \/\/ Vue.js\u306e\u30b5\u30dd\u30fc\u30c8\u3092\u6709\u52b9\u5316\n   .extract(['vue', 'axios']); \/\/ \u30d9\u30f3\u30c0\u30fc\u30d5\u30a1\u30a4\u30eb\u306e\u5206\u96e2<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">SASS \u3084 Less \u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u8a2d\u5b9a<\/h3>\n\n\n\n<p>CSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u306e\u8a2d\u5b9a\u306b\u3088\u308a\u3001\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u7ba1\u7406\u304c\u52b9\u7387\u5316\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. SASS\u306e\u30b3\u30f3\u30d1\u30a4\u30eb<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u57fa\u672c\u7684\u306aSASS\u30b3\u30f3\u30d1\u30a4\u30eb\nmix.sass('resources\/sass\/app.scss', 'public\/css')\n   .sass('resources\/sass\/admin.scss', 'public\/css');\n\n\/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u8ffd\u52a0\nmix.sass('resources\/sass\/app.scss', 'public\/css', {\n    sassOptions: {\n        outputStyle: 'compressed',\n        includePaths: ['node_modules']\n    }\n});<\/pre>\n\n\n\n<p><strong>2. Less\u306e\u30b3\u30f3\u30d1\u30a4\u30eb<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mix.less('resources\/less\/app.less', 'public\/css', {\n    lessOptions: {\n        strictMath: true\n    }\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u30a2\u30bb\u30c3\u30c8\u306e\u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u8a2d\u5b9a<\/h3>\n\n\n\n<p>\u30ad\u30e3\u30c3\u30b7\u30e5\u5236\u5fa1\u306e\u305f\u3081\u306e\u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u306f\u3001\u672c\u756a\u74b0\u5883\u3067\u7279\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u3059\u3079\u3066\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u6e08\u307f\u30d5\u30a1\u30a4\u30eb\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\u3092\u4ed8\u4e0e\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css')\n   .version();\n\n\/\/ \u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306e\u4f7f\u7528\uff08Blade\u5185\uff09\n&lt;script src=\"{{ mix('\/js\/app.js') }}\"&gt;&lt;\/script&gt;\n&lt;link href=\"{{ mix('\/css\/app.css') }}\" rel=\"stylesheet\"&gt;\n\n\/\/ \u30de\u30cb\u30d5\u30a7\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u4f8b\uff08public\/mix-manifest.json\uff09\n{\n    \"\/js\/app.js\": \"\/js\/app.js?id=abc123\",\n    \"\/css\/app.css\": \"\/css\/app.css?id=def456\"\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u751f\u6210\u8a2d\u5b9a<\/h3>\n\n\n\n<p>\u30c7\u30d0\u30c3\u30b0\u3092\u5bb9\u6613\u306b\u3059\u308b\u305f\u3081\u306e\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u57fa\u672c\u7684\u306a\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u6709\u52b9\u5316\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css')\n   .sourceMaps();\n\n\/\/ \u958b\u767a\u74b0\u5883\u306e\u307f\u3067\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u6709\u52b9\u5316\nif (!mix.inProduction()) {\n    mix.sourceMaps();\n}\n\n\/\/ \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u8a73\u7d30\u8a2d\u5b9a\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sourceMaps(true, 'source-map', {\n        exclude: \/vendor\/  \/\/ vendor\u95a2\u9023\u30d5\u30a1\u30a4\u30eb\u3092\u9664\u5916\n   });<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u672c\u756a\u74b0\u5883\u5411\u3051\u306e\u6700\u9069\u5316\u8a2d\u5b9a<\/h3>\n\n\n\n<p>\u672c\u756a\u74b0\u5883\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u5927\u5316\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u672c\u756a\u74b0\u5883\u7528\u306e\u6700\u9069\u5316\u8a2d\u5b9a\nif (mix.inProduction()) {\n    \/\/ JavaScript\u5727\u7e2e\u306e\u8a73\u7d30\u8a2d\u5b9a\n    mix.webpackConfig({\n        optimization: {\n            minimizer: [\n                new TerserPlugin({\n                    terserOptions: {\n                        compress: {\n                            drop_console: true, \/\/ console.log\u6587\u306e\u524a\u9664\n                        },\n                    },\n                }),\n            ],\n            splitChunks: {\n                chunks: 'all',  \/\/ \u30b3\u30fc\u30c9\u306e\u5206\u5272\u6700\u9069\u5316\n            }\n        }\n    });\n\n    \/\/ CSS\u306e\u6700\u9069\u5316\n    mix.options({\n        cssNano: {\n            discardComments: {\n                removeAll: true,\n            },\n        },\n        postCss: [\n            require('autoprefixer'),\n            require('cssnano')({\n                preset: 'default',\n            }),\n        ],\n    });\n}\n\n\/\/ \u753b\u50cf\u306e\u6700\u9069\u5316\nmix.copyDirectory('resources\/images', 'public\/images')\n   .options({\n       imgLoaderOptions: {\n           enabled: true,\n           gifsicle: {},\n           mozjpeg: {},\n           optipng: {},\n           svgo: {},\n       },\n   });<\/pre>\n\n\n\n<p>\u305d\u308c\u305e\u308c\u306e\u8a2d\u5b9a\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8981\u4ef6\u306b\u5fdc\u3058\u3066\u7d44\u307f\u5408\u308f\u305b\u305f\u308a\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u9069\u5207\u306a\u8a2d\u5b9a\u306b\u3088\u308a\u3001\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-13\">\u5b9f\u8df5\u7684\u306aLaravel Mix\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6280\u6cd5<\/h2>\n\n\n\n<p>Laravel Mix\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e\u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3001\u5b9f\u8df5\u7684\u306a\u4f8b\u3092\u4ea4\u3048\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u8907\u6570\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306e\u7ba1\u7406\u65b9\u6cd5<\/h3>\n\n\n\n<p>\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u8907\u6570\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3092\u52b9\u7387\u7684\u306b\u7ba1\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u30de\u30eb\u30c1\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u6210<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nconst mix = require('laravel-mix');\n\n\/\/ \u8907\u6570\u306eJavaScript\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\nmix.js('resources\/js\/app.js', 'public\/js')\n   .js('resources\/js\/admin\/app.js', 'public\/js\/admin')\n   .js('resources\/js\/customer\/app.js', 'public\/js\/customer');\n\n\/\/ \u5bfe\u5fdc\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\nmix.sass('resources\/sass\/app.scss', 'public\/css')\n   .sass('resources\/sass\/admin\/app.scss', 'public\/css\/admin')\n   .sass('resources\/sass\/customer\/app.scss', 'public\/css\/customer');\n\n\/\/ \u30da\u30fc\u30b8\u5225\u306e\u5171\u901a\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u62bd\u51fa\nmix.extract([\n    'vue',\n    'axios',\n    'lodash',\n    'jquery'\n]);<\/pre>\n\n\n\n<p><strong>2. \u52d5\u7684\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3092\u52d5\u7684\u306b\u8a2d\u5b9a\nconst fs = require('fs');\nconst path = require('path');\n\n\/\/ pages \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306e\u5168\u3066\u306eJS\u30d5\u30a1\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u8ffd\u52a0\nconst pagesDir = 'resources\/js\/pages';\nfs.readdirSync(pagesDir).forEach(file =&gt; {\n    if (file.endsWith('.js')) {\n        mix.js(`${pagesDir}\/${file}`, 'public\/js\/pages');\n    }\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30ab\u30b9\u30bf\u30e0Webpack\u8a2d\u5b9a\u306e\u8ffd\u52a0\u65b9\u6cd5<\/h3>\n\n\n\n<p>Webpack\u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e\u30ab\u30b9\u30bf\u30e0\u8a2d\u5b9a\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. webpackConfig\u306b\u3088\u308b\u8a2d\u5b9a\u306e\u62e1\u5f35<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">mix.webpackConfig({\n    \/\/ \u89e3\u6c7a\u8a2d\u5b9a\n    resolve: {\n        alias: {\n            '@': path.resolve('resources\/js'),\n            '~': path.resolve('resources\/sass')\n        },\n        extensions: ['*', '.js', '.jsx', '.vue']\n    },\n\n    \/\/ \u30e2\u30b8\u30e5\u30fc\u30eb\u30eb\u30fc\u30eb\u306e\u8ffd\u52a0\n    module: {\n        rules: [\n            {\n                test: \/\\.tsx?$\/,\n                loader: 'ts-loader',\n                exclude: \/node_modules\/\n            }\n        ]\n    },\n\n    \/\/ \u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8ffd\u52a0\n    plugins: [\n        new webpack.DefinePlugin({\n            'process.env': {\n                APP_ENV: JSON.stringify(process.env.APP_ENV)\n            }\n        })\n    ]\n});<\/pre>\n\n\n\n<p><strong>2. \u30ab\u30b9\u30bf\u30e0\u30ed\u30fc\u30c0\u30fc\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ SVG\u3092Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b\u8a2d\u5b9a\nmix.webpackConfig({\n    module: {\n        rules: [\n            {\n                test: \/\\.svg$\/,\n                use: [\n                    'vue-loader',\n                    {\n                        loader: 'vue-svg-loader',\n                        options: {\n                            svgo: {\n                                plugins: [\n                                    { removeUnusedNS: false },\n                                    { removeUselessDefs: false },\n                                    { cleanupIDs: false }\n                                ]\n                            }\n                        }\n                    }\n                ]\n            }\n        ]\n    }\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u74b0\u5883\u5225\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p>\u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u3067\u7570\u306a\u308b\u8a2d\u5b9a\u3092\u9069\u7528\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u74b0\u5883\u5909\u6570\u306b\u57fa\u3065\u304f\u6761\u4ef6\u5206\u5c90<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ .env \u30d5\u30a1\u30a4\u30eb\u306e\u5024\u3092\u4f7f\u7528\nrequire('dotenv').config();\n\n\/\/ \u74b0\u5883\u5225\u306e\u8a2d\u5b9a\nconst config = {\n    production: {\n        cssOptimize: true,\n        jsOptimize: true,\n        sourceMap: false,\n        extractVendors: true\n    },\n    development: {\n        cssOptimize: false,\n        jsOptimize: false,\n        sourceMap: true,\n        extractVendors: false\n    }\n};\n\n\/\/ \u73fe\u5728\u306e\u74b0\u5883\u8a2d\u5b9a\u3092\u53d6\u5f97\nconst env = process.env.NODE_ENV || 'development';\nconst currentConfig = config[env];\n\n\/\/ \u74b0\u5883\u306b\u5fdc\u3058\u305f\u8a2d\u5b9a\u306e\u9069\u7528\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css')\n   .options({\n       processCssUrls: true,\n       purifyCss: currentConfig.cssOptimize,\n       postCss: [\n           require('autoprefixer')\n       ]\n   })\n   .sourceMaps(currentConfig.sourceMap);\n\nif (currentConfig.extractVendors) {\n    mix.extract();\n}\n\n\/\/ \u672c\u756a\u74b0\u5883\u7279\u6709\u306e\u8a2d\u5b9a\nif (mix.inProduction()) {\n    mix.version();\n\n    \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u30b0\u30eb\u30fc\u30d7\u306e\u8a2d\u5b9a\n    mix.webpackConfig({\n        optimization: {\n            splitChunks: {\n                cacheGroups: {\n                    defaultVendors: {\n                        test: \/[\\\\\/]node_modules[\\\\\/]\/,\n                        priority: -10,\n                        reuseExistingChunk: true\n                    },\n                    common: {\n                        minChunks: 2,\n                        priority: -20,\n                        reuseExistingChunk: true\n                    }\n                }\n            }\n        }\n    });\n}<\/pre>\n\n\n\n<p><strong>2. \u74b0\u5883\u5225\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u958b\u767a\u74b0\u5883\u5c02\u7528\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\nif (!mix.inProduction()) {\n    mix.webpackConfig({\n        plugins: [\n            new webpack.ProgressPlugin(),\n            new webpack.SourceMapDevToolPlugin({\n                filename: '[file].map',\n                exclude: \/vendor\/\n            })\n        ]\n    });\n}\n\n\/\/ \u672c\u756a\u74b0\u5883\u5c02\u7528\u306e\u6700\u9069\u5316\nif (mix.inProduction()) {\n    mix.webpackConfig({\n        plugins: [\n            new CompressionPlugin({\n                algorithm: 'gzip',\n                test: \/\\.js$|\\.css$|\\.html$|\\.svg$\/,\n                threshold: 10240,\n                minRatio: 0.8\n            })\n        ]\n    });\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3088\u308a\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u8981\u4ef6\u306b\u5408\u308f\u305b\u305f\u67d4\u8edf\u306a\u8a2d\u5b9a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u74b0\u5883\u306b\u5fdc\u3058\u305f\u6700\u9069\u5316\u3068\u3001\u52b9\u7387\u7684\u306a\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-17\">Laravel Mix\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u306e\u6700\u9069\u5316<\/h2>\n\n\n\n<p>\u958b\u767a\u52b9\u7387\u3092\u6700\u5927\u9650\u306b\u9ad8\u3081\u308b\u305f\u3081\u306eLaravel Mix\u306e\u6d3b\u7528\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3001\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u3092\u6d3b\u7528\u3057\u305f\u958b\u767a\u30d5\u30ed\u30fc<\/h3>\n\n\n\n<p>\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u5909\u66f4\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u78ba\u8a8d\u3057\u306a\u304c\u3089\u52b9\u7387\u7684\u306a\u958b\u767a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Hot Module Replacement (HMR) \u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css')\n   .vue()\n   .options({\n       hmrOptions: {\n           host: 'localhost',\n           port: 8080\n       }\n   });\n\n\/\/ HMR\u306e\u6709\u52b9\u5316\nif (!mix.inProduction()) {\n    mix.webpackConfig({\n        devServer: {\n            hot: true,\n            headers: {\n                'Access-Control-Allow-Origin': '*'\n            }\n        }\n    });\n}<\/pre>\n\n\n\n<p><strong>2. BrowserSync\u7d71\u5408\u306b\u3088\u308b\u30e9\u30a4\u30d6\u30ea\u30ed\u30fc\u30c9<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ BrowserSync\u306e\u8a2d\u5b9a\nmix.browserSync({\n    proxy: 'local.app', \/\/ \u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883\u306eURL\n    open: false,        \/\/ \u81ea\u52d5\u3067\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u304b\u306a\u3044\n    notify: false,      \/\/ \u901a\u77e5\u3092\u7121\u52b9\u5316\n    files: [\n        'app\/**\/*.php',\n        'resources\/views\/**\/*.php',\n        'public\/js\/**\/*.js',\n        'public\/css\/**\/*.css'\n    ]\n});\n\n\/\/ package.json\u306escripts\u8a2d\u5b9a\n{\n    \"scripts\": {\n        \"watch\": \"mix watch\",\n        \"hot\": \"mix watch --hot\",\n        \"sync\": \"mix watch -- --watch-options-poll=1000\"\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9\u306e\u9ad8\u901f\u5316\u624b\u6cd5<\/h3>\n\n\n\n<p>\u30d3\u30eb\u30c9\u6642\u9593\u3092\u77ed\u7e2e\u3057\u3001\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u3068\u6700\u9069\u5316\u624b\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nmix.webpackConfig({\n    cache: {\n        type: 'filesystem',\n        buildDependencies: {\n            config: [__filename]  \/\/ webpack.mix.js\u306e\u5909\u66f4\u6642\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u7121\u52b9\u5316\n        }\n    }\n});\n\n\/\/ \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u8a2d\u5b9a\nmix.webpackConfig({\n    optimization: {\n        removeAvailableModules: false,\n        removeEmptyChunks: false,\n        splitChunks: false,\n    },\n    output: {\n        pathinfo: false\n    }\n});<\/pre>\n\n\n\n<p><strong>2. \u4e26\u5217\u51e6\u7406\u306e\u6d3b\u7528<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const os = require('os');\n\nmix.webpackConfig({\n    \/\/ thread-loader\u306e\u8a2d\u5b9a\n    module: {\n        rules: [\n            {\n                test: \/\\.js$\/,\n                exclude: \/node_modules\/,\n                use: [\n                    {\n                        loader: 'thread-loader',\n                        options: {\n                            workers: os.cpus().length - 1,\n                            poolTimeout: Infinity\n                        }\n                    },\n                    'babel-loader'\n                ]\n            }\n        ]\n    }\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u30c1\u30fc\u30e0\u958b\u767a\u306b\u304a\u3051\u308b\u8a2d\u5b9a\u306e\u5171\u6709\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<p>\u30c1\u30fc\u30e0\u3067\u306e\u52b9\u7387\u7684\u306a\u958b\u767a\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u5171\u6709\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u5171\u6709\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u9020\u5316<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\nrequire('.\/webpack.mix.base.js');    \/\/ \u57fa\u672c\u8a2d\u5b9a\nrequire('.\/webpack.mix.modules.js');  \/\/ \u30e2\u30b8\u30e5\u30fc\u30eb\u5225\u8a2d\u5b9a\nrequire('.\/webpack.mix.env.js');      \/\/ \u74b0\u5883\u5225\u8a2d\u5b9a\n\n\/\/ webpack.mix.base.js - \u57fa\u672c\u8a2d\u5b9a\nconst mix = require('laravel-mix');\n\nmodule.exports = {\n    setBaseMixConfig() {\n        mix.js('resources\/js\/app.js', 'public\/js')\n           .sass('resources\/sass\/app.scss', 'public\/css')\n           .version();\n    }\n};\n\n\/\/ webpack.mix.modules.js - \u30e2\u30b8\u30e5\u30fc\u30eb\u8a2d\u5b9a\nmodule.exports = {\n    configureModules() {\n        \/\/ \u30e2\u30b8\u30e5\u30fc\u30eb\u56fa\u6709\u306e\u8a2d\u5b9a\n    }\n};<\/pre>\n\n\n\n<p><strong>2. \u30c1\u30fc\u30e0\u958b\u767a\u306e\u305f\u3081\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ .mix-manifest.json\u306e\u5171\u6709\u8a2d\u5b9a\n{\n    \"ignore_patterns\": [\n        \"public\/hot\",\n        \"public\/storage\",\n        \"storage\/*.key\"\n    ]\n}\n\n\/\/ \u30a8\u30c7\u30a3\u30bf\u8a2d\u5b9a\u306e\u5171\u6709\uff08.editorconfig\uff09\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 4\ntrim_trailing_whitespace = true\n\n[*.{yml,yaml,json,scss,css}]\nindent_size = 2\n\n\/\/ package.json\u3067\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u6a19\u6e96\u5316\n{\n    \"scripts\": {\n        \"dev\": \"npm run development\",\n        \"development\": \"mix\",\n        \"watch\": \"mix watch\",\n        \"watch-poll\": \"mix watch -- --watch-options-poll=1000\",\n        \"hot\": \"mix watch --hot\",\n        \"prod\": \"npm run production\",\n        \"production\": \"mix --production\",\n        \"lint\": \"eslint resources\/js --ext .js,.vue\",\n        \"lint-fix\": \"eslint resources\/js --ext .js,.vue --fix\"\n    }\n}<\/pre>\n\n\n\n<p><strong>3. \u30c1\u30fc\u30e0\u958b\u767a\u3067\u306e\u30b3\u30fc\u30c9\u54c1\u8cea\u7ba1\u7406<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ .eslintrc.js\nmodule.exports = {\n    extends: [\n        'eslint:recommended',\n        'plugin:vue\/recommended'\n    ],\n    rules: {\n        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',\n        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn'\n    }\n};\n\n\/\/ stylelint.config.js\nmodule.exports = {\n    extends: ['stylelint-config-standard'],\n    rules: {\n        'at-rule-no-unknown': [\n            true,\n            {\n                ignoreAtRules: [\n                    'tailwind',\n                    'apply',\n                    'variants',\n                    'responsive',\n                    'screen'\n                ]\n            }\n        ]\n    }\n};<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3068\u624b\u6cd5\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30c1\u30fc\u30e0\u5168\u4f53\u306e\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u9ad8\u54c1\u8cea\u306a\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3092\u7dad\u6301\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-21\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0<\/h2>\n\n\n\n<p>Laravel Mix\u3092\u4f7f\u7528\u3059\u308b\u969b\u306b\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u3001\u52b9\u679c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<p>\u3088\u304f\u906d\u9047\u3059\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u5177\u4f53\u7684\u306a\u89e3\u6c7a\u624b\u9806\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Node Modules\u306b\u95a2\u3059\u308b\u554f\u984c<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30a8\u30e9\u30fc\u4f8b\nError: Cannot find module 'webpack\/lib\/Compiler.js'\n\n# \u89e3\u6c7a\u65b9\u6cd5\nrm -rf node_modules\nrm package-lock.json\nnpm cache clean --force\nnpm install<\/pre>\n\n\n\n<p><strong>2. \u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u306e\u5bfe\u51e6<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a8\u30e9\u30fc\u4f8b\uff1aModule not found\nModule not found: Error: Can't resolve '@\/components\/Example' in '\/path\/to\/project'\n\n\/\/ \u89e3\u6c7a\u65b9\u6cd5\uff1awebpack.mix.js\u3067\u30a8\u30a4\u30ea\u30a2\u30b9\u3092\u8a2d\u5b9a\nmix.webpackConfig({\n    resolve: {\n        alias: {\n            '@': path.resolve('resources\/js')\n        }\n    }\n});\n\n\/\/ \u30a8\u30e9\u30fc\u4f8b\uff1aSASS\/SCSS\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\nError: Node Sass does not yet support your current environment\n\n\/\/ \u89e3\u6c7a\u65b9\u6cd5\uff1anode-sass\u306e\u518d\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm rebuild node-sass<\/pre>\n\n\n\n<p><strong>3. \u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u554f\u984c<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ package.json\u3067\u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u9069\u5207\u306a\u6307\u5b9a\n{\n    \"devDependencies\": {\n        \"laravel-mix\": \"^6.0.0\",\n        \"postcss\": \"^8.1.14\",\n        \"sass\": \"^1.32.0\",\n        \"sass-loader\": \"^10.0.0\",\n        \"@babel\/core\": \"^7.12.0\"\n    }\n}\n\n\/\/ .babelrc\u3067\u306e\u4e92\u63db\u6027\u8a2d\u5b9a\n{\n    \"presets\": [\n        [\"@babel\/preset-env\", {\n            \"targets\": {\n                \"browsers\": [\"&gt; 1%\", \"last 2 versions\"]\n            }\n        }]\n    ]\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-23\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u7279\u5b9a\u3068\u6539\u5584\u624b\u9806<\/h3>\n\n\n\n<p>\u30d3\u30eb\u30c9\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u554f\u984c\u3092\u7279\u5b9a\u3057\u3001\u6539\u5584\u3059\u308b\u305f\u3081\u306e\u624b\u6cd5\u3092\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u30d3\u30eb\u30c9\u6642\u9593\u306e\u5206\u6790<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5206\u6790\u8a2d\u5b9a\nconst SpeedMeasurePlugin = require('speed-measure-webpack-plugin');\nconst smp = new SpeedMeasurePlugin();\n\nmix.webpackConfig(smp.wrap({\n    \/\/ \u65e2\u5b58\u306ewebpack\u8a2d\u5b9a\n}));\n\n\/\/ \u30d3\u30eb\u30c9\u30b5\u30a4\u30ba\u306e\u5206\u6790\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nif (process.env.ANALYZE) {\n    mix.webpackConfig({\n        plugins: [\n            new BundleAnalyzerPlugin()\n        ]\n    });\n}<\/pre>\n\n\n\n<p><strong>2. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u5b9f\u88c5<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30c1\u30e3\u30f3\u30af\u6700\u9069\u5316\u306e\u8a2d\u5b9a\nmix.webpackConfig({\n    optimization: {\n        splitChunks: {\n            chunks: 'all',\n            minSize: 20000,\n            maxSize: 244000,\n            cacheGroups: {\n                vendor: {\n                    test: \/[\\\\\/]node_modules[\\\\\/]\/,\n                    name(module) {\n                        const packageName = module.context.match(\n                            \/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/\n                        )[1];\n                        return `vendor.${packageName.replace('@', '')}`;\n                    }\n                }\n            }\n        }\n    }\n});\n\n\/\/ \u958b\u767a\u6642\u306e\u6700\u9069\u5316\nif (!mix.inProduction()) {\n    mix.webpackConfig({\n        devtool: 'eval-cheap-module-source-map',\n        optimization: {\n            removeAvailableModules: false,\n            removeEmptyChunks: false,\n            splitChunks: false\n        }\n    });\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u6642\u306e\u6ce8\u610f\u70b9\u3068\u4e92\u63db\u6027\u306e\u78ba\u4fdd<\/h3>\n\n\n\n<p>Laravel Mix\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u6642\u306e\u6ce8\u610f\u70b9\u3068\u3001\u4e92\u63db\u6027\u3092\u7dad\u6301\u3059\u308b\u305f\u3081\u306e\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u306e\u624b\u9806<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># 1. \u73fe\u5728\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\ncp package.json package.json.backup\ncp webpack.mix.js webpack.mix.js.backup\n\n# 2. Laravel Mix\u306e\u66f4\u65b0\nnpm install laravel-mix@latest --save-dev\n\n# 3. \u95a2\u9023\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u66f4\u65b0\nnpm install postcss@^8.1.14 sass@latest sass-loader@latest --save-dev<\/pre>\n\n\n\n<p><strong>2. \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u4e92\u63db\u6027\u7dad\u6301<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.mix.js\u3067\u306e\u5f8c\u65b9\u4e92\u63db\u6027\u306e\u78ba\u4fdd\nconst mix = require('laravel-mix');\n\n\/\/ \u30d0\u30fc\u30b8\u30e7\u30f36\u4ee5\u964d\u3067\u306e\u5909\u66f4\u70b9\u3078\u306e\u5bfe\u5fdc\nif (mix.versionGetCurrent() &gt;= 6) {\n    mix.options({\n        processCssUrls: true,\n        postCss: [\n            require('postcss-import'),\n            require('tailwindcss'),\n            require('autoprefixer'),\n        ],\n    });\n} else {\n    \/\/ \u65e7\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u8a2d\u5b9a\n    mix.options({\n        processCssUrls: true,\n        postCss: [\n            require('autoprefixer')\n        ],\n    });\n}\n\n\/\/ \u975e\u63a8\u5968\u6a5f\u80fd\u306e\u4ee3\u66ff\u8a2d\u5b9a\nif (mix.versionGetCurrent() &gt;= 6) {\n    \/\/ \u65b0\u3057\u3044\u65b9\u6cd5\u3067\u306e\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u8a2d\u5b9a\n    mix.sourceMaps(true, 'source-map');\n} else {\n    \/\/ \u53e4\u3044\u65b9\u6cd5\u3067\u306e\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u8a2d\u5b9a\n    mix.sourceMaps();\n}<\/pre>\n\n\n\n<p><strong>3. \u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u25a1 package.json\u306e\u4f9d\u5b58\u95a2\u4fc2\u30c1\u30a7\u30c3\u30af\n  - Laravel Mix\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\n  - \u95a2\u9023\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\n  - peerDependencies\u306e\u78ba\u8a8d\n\n\u25a1 \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u78ba\u8a8d\n  - webpack.mix.js\u306e\u69cb\u6587\n  - .babelrc\u306e\u8a2d\u5b9a\n  - postCSS\u306e\u8a2d\u5b9a\n\n\u25a1 \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\n  - npm cache clean --force\n  - rm -rf node_modules\n  - rm -rf public\/mix-manifest.json\n\n\u25a1 \u30d3\u30eb\u30c9\u51fa\u529b\u306e\u78ba\u8a8d\n  - public\/js, public\/css\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\n  - \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u30d5\u30a1\u30a4\u30eb\n  - \u30de\u30cb\u30d5\u30a7\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30ac\u30a4\u30c9\u3092\u53c2\u8003\u306b\u3001\u554f\u984c\u306e\u65e9\u671f\u767a\u898b\u3068\u52b9\u7387\u7684\u306a\u89e3\u6c7a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u3001\u5b9a\u671f\u7684\u306a\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3068\u4e92\u63db\u6027\u306e\u78ba\u8a8d\u3092\u884c\u3046\u3053\u3068\u3067\u3001\u5b89\u5b9a\u3057\u305f\u958b\u767a\u74b0\u5883\u3092\u7dad\u6301\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":{"0":"post-2660","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-php","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2660"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2660\/revisions"}],"predecessor-version":[{"id":2662,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2660\/revisions\/2662"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}