{"id":107125,"date":"2019-03-15T18:16:58","date_gmt":"2019-03-15T09:16:58","guid":{"rendered":"http:\/\/www.key-p.com\/blog\/staff\/?p=107125"},"modified":"2019-03-18T11:36:37","modified_gmt":"2019-03-18T02:36:37","slug":"mpa%e3%83%9e%e3%83%ab%e3%83%81%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7webpack%e3%82%92%e4%bd%bf%e3%81%86","status":"publish","type":"post","link":"https:\/\/www.key-p.com\/blog\/staff\/archives\/107125","title":{"rendered":"MPA(\u30de\u30eb\u30c1\u30da\u30fc\u30b8\u30a2\u30d7\u30ea)\u3067webpack\u3092\u4f7f\u3046"},"content":{"rendered":"

\n\"\"\n
\n
\n\u3053\u3093\u306b\u3061\u306f\u3002
\n\u73fe\u5728\u306eWeb\u30a2\u30d7\u30ea\u958b\u767a\u306f\u3001\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u304c1\u3064\u3060\u3051\u306eSPA\uff08\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\uff09\u304c\u4e3b\u6d41\u3067\u3001webpack\u306b\u95a2\u3059\u308b\u60c5\u5831\u3082SPA\u5411\u3051\u304c\u5727\u5012\u7684\u306b\u591a\u3044\u3067\u3059\u3002
\n
\n\u901a\u5e38\u3001MPA\uff08\u30de\u30eb\u30c1\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u74b0\u5883\u4e0b\u3067\u305d\u306e\u307e\u307ewebpack\u3092\u4f7f\u304a\u3046\u3068\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3059\u308b\u305f\u3073\u306bwebpack.config.js\u3092\u3044\u3058\u308b\u5fc5\u8981\u304c\u3042\u308a\u9762\u5012\u3067\u3059\u3002
\n
\n\u4eca\u56de\u306f\u3001\u305d\u3093\u306aMPA\u74b0\u5883\u4e0b\u3067\u3001\u306a\u308b\u3079\u304f\u697d\u3092\u3067\u304d\u308b\u3088\u3046\u306awebpack\u306e\u8a2d\u5b9a\u30dd\u30a4\u30f3\u30c8\u3092\u66f8\u304d\u307e\u3059\u3002
\n
\n

\u5b9f\u73fe\u3057\u305f\u3044\u3053\u3068<\/h3>\n\u65b0\u3057\u3044\u30da\u30fc\u30b8\u8ffd\u52a0\u3057\u3066\u3082\u57fa\u672c\u7684\u306bwebpack.config.js\u3092\u3044\u3058\u3089\u306a\u304f\u3066\u6e08\u3080\u3088\u3046\u306b\u3057\u305f\u3044\u3002
\n
\n\u4eca\u56de\u306f2\u3064\u306e\u30da\u30fc\u30b8\uff08index.html<\/strong>, support.html<\/strong>\uff09\u304c\u5b58\u5728\u3059\u308bWeb\u30a2\u30d7\u30ea\u4e0a\u306e\u30a2\u30bb\u30c3\u30c8\u3092\u3001webpack\u3092\u4f7f\u3044HTML\u306b\u30d0\u30f3\u30c9\u30eb\u3057\u3066\u51fa\u529b\u3057\u307e\u3059\u3002
\n\u5404\u30da\u30fc\u30b8\u306f\u56fa\u6709\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3082\u306e\u3068\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u5185\u3067ES\u30e2\u30b8\u30e5\u30fc\u30eb\u306eVue.js\u3092\u3064\u304b\u3044\u307e\u3059\u3002
\n

\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h4>\n
\u251c\u2500webpack.config.js\n\u251c\u2500dist\n\u2502\u3000...(\u7701\u7565)...\n\u2514\u2500src\n\u3000\u3000\u251cindex.html\n\u3000\u3000\u251cindex.js \u30fb\u30fb\u30fb index.html\u3067\u8aad\u307f\u8fbc\u3080\u3002\u30d5\u30a1\u30a4\u30eb\u5185\u3067Vue.js\u3092\u3064\u304b\u3046\n\u3000\u3000\u251csupport.html\n\u3000\u3000\u2514support.js \u30fb\u30fb\u30fb support.html\u3067\u8aad\u307f\u8fbc\u3080\u3002\u30d5\u30a1\u30a4\u30eb\u5185\u3067Vue.js\u3092\u3064\u304b\u3046<\/pre> \u30d3\u30eb\u30c9\u5f8c\u306f\u3001dist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4e0b\u306bHTML\u3068JavaScript\u3092\u51fa\u529b\u3057\u307e\u3059\u3002
\n
\ndist\n\u3000\u251cvendor.js \u30fb\u30fb\u30fb \u5404\u30da\u30fc\u30b8\u5171\u901a\u4f7f\u7528\u306e\u5916\u90e8\u30e2\u30b8\u30e5\u30fc\u30eb\uff08Vue.js\u306a\u3069\uff09\n\u3000\u251cindex.html \u30fb\u30fb\u30fb vendor.js\u3068index.js\u3092\u30d0\u30f3\u30c9\u30eb\n\u3000\u251cindex.js\n\u3000\u251csupport.html \u30fb\u30fb\u30fb vendor.js\u3068support.js\u3092\u30d0\u30f3\u30c9\u30eb\n\u3000\u2514support.js\u3000\u3000<\/pre>\n
\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n\u6700\u4f4e\u9650\u3057\u304b\u8f09\u305b\u3066\u3044\u307e\u305b\u3093\u3002
\n
webpack.config.js<\/h5>\n
const path = require('path')\nconst glob = require('glob')\nconst webpack = require('webpack')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nconst webpackConfig = {\n  entry: {},\n  output: {\n    path: path.resolve('dist'),\n    publicPath: '\/dist\/',\n    filename: '[name]'\n  },\n  plugins: [\n    new webpack.ProvidePlugin({\n      Vue: ['vue\/dist\/vue.esm.js', 'default']\n    }),\n  ],\n  optimization: {\n    splitChunks: {\n      name: 'vendor.js',\n      chunks: 'initial'\n    }\n  }\n}\n\nglob.sync('**\/*.js', {\n  cwd: 'src',\n}).forEach(jsName => {\n  webpackConfig.entry[jsName] = path.resolve('src', jsName)\n\n  const tplName = path.basename(jsName, '.js') + '.html'\n  webpackConfig.plugins.push(new HtmlWebpackPlugin({\n    template: path.resolve('src', tplName),\n    filename: tplName,\n    inject:'body',\n    includeSiblingChunks :true,\n    chunks:['vendor.js', jsName]\n  }))\n})\n\nmodule.exports = webpackConfig<\/pre>\n
\n
\u30dd\u30a4\u30f3\u30c8<\/h3>\n
1. \u5916\u90e8\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u8aad\u307f\u8fbc\u307f<\/h4>\n\u5404\u30da\u30fc\u30b8\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u3001\u6bce\u56deVue.js\u306e\u3088\u3046\u306a\u5916\u90e8\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308b\u306e\u306f\u624b\u9593\u3067\u3059\u306e\u3067ProvidePlugin<\/a>\u3092\u4f7f\u3044\u307e\u3059\u3002
\n
webpack.config.js(\u629c\u7c8b)<\/h5>\n
...(\u7701\u7565)...\nplugins: [\n  new webpack.ProvidePlugin({\n    Vue: ['vue\/dist\/vue.esm.js', 'default']\n  })\n]\n...(\u7701\u7565)...<\/pre>
src\/index.js<\/h5>\n
\/\/ Vue.js\u3092import\u306a\u3057\u3067\u3001\u3059\u3050\u4f7f\u3048\u308b\nnew Vue({\n  el: '#app',\n  data: {\n    message: 'Hello Vue!'\n  }\n})<\/pre>\n
2. \u5916\u90e8\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30d0\u30f3\u30c9\u30eb<\/h4>\n\u305d\u306e\u307e\u307e\u3060\u3068 index.js \u3068 support.js \u306e\u3001\u305d\u308c\u305e\u308c\u306bVue.js\u304c\u30d0\u30f3\u30c9\u30eb\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u3001SplitChunksPlugin<\/a>\u3092\u4f7f\u3044\u5916\u90e8\u5171\u901a\u30e2\u30b8\u30e5\u30fc\u30eb\u306fvendor.js\u3068\u3057\u3066\u3001\u308f\u3051\u3066\u51fa\u529b\u3057\u307e\u3059\u3002
\n\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u4f7f\u7528\u72b6\u6cc1\u306b\u3042\u308f\u305b\u3066\u9069\u5207\u306a\u5185\u5bb9\u3067\u51fa\u529b\u3057\u3066\u304f\u308c\u308b\u307f\u305f\u3044\u3067\u3059\u3002
\n
webpack.config.js(\u629c\u7c8b)<\/h5>\n
...(\u7701\u7565)...\noptimization: {\n  splitChunks: {\n    name: 'vendor.js',\n    chunks: 'initial'\n  }\n}\n...(\u7701\u7565)...<\/pre>\n
3. \u30a8\u30f3\u30c8\u30ea\u306e\u81ea\u52d5\u8ffd\u52a0<\/h4>\n\u901a\u5e38\u3001\u65b0\u3057\u3044\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3057\u305f\u5834\u5408\u306bwebpack.config.js\u306eentry\u30aa\u30d7\u30b7\u30e7\u30f3\u3078\u3001\u30d0\u30f3\u30c9\u30eb\u3057\u305f\u3044JavaScript\u30d5\u30a1\u30a4\u30eb\u3092\u5217\u6319\u3057\u307e\u3059\u304c\u3001\u6570\u304c\u591a\u3044\u5834\u5408\u3084\u5f8c\u304b\u3089\u5897\u3048\u308b\u3053\u3068\u3092\u8003\u616e\u3057Glob\u3067\u81ea\u52d5\u5316\u3057\u307e\u3059\u3002
\n
\nglob.sync('**\/*.js', {\n  cwd: 'src',\n}).forEach(jsName => {\n  webpackConfig.entry[jsName] = path.resolve('src', jsName)\n})\n\nconsole.log(webpackConfig.entry)\n\/* \nentry: {\n  'index.js': '...(\u7701\u7565)...\/src\/index.js',\n  'support.js': '...(\u7701\u7565)...\/src\/support.js'\n}\n*\/<\/pre> 
4. \u30a2\u30bb\u30c3\u30c8\u3092\u30d0\u30f3\u30c9\u30eb\u3057\u305fHTML\u3092\u51fa\u529b<\/h4>\nHtmlWebpackPlugin<\/a>\u3092\u4f7f\u3046\u3068\u3001\u5404\u30da\u30fc\u30b8\u6bce\u306bvendor.js \u3068 \u30da\u30fc\u30b8\u56fa\u6709\u306eJavaScipt\u30d5\u30a1\u30a4\u30eb\u306escript\u30bf\u30b0\u3092\u4ed8\u52a0\u3057\u305fHTML\u30d5\u30a1\u30a4\u30eb\u3092\u51fa\u529b\u3067\u304d\u307e\u3059\u3002
\n 
webpack.config.js(\u629c\u7c8b)<\/h5>\n
...(\u7701\u7565)...\nglob.sync('**\/*.js', {\n  cwd: 'src',\n}).forEach(jsName => {\n  ...(\u7701\u7565)...\n  \/\/ index.js -> index.html\n  const tplName = path.basename(jsName, '.js') + '.html'\n  webpackConfig.plugins.push(new HtmlWebpackPlugin({\n    template: path.resolve('src', tplName),\n    filename: tplName,\n    inject:'body',\n    includeSiblingChunks :true,\n    chunks:['vendor.js', jsName]\n  }))\n})\n...(\u7701\u7565)...<\/pre> 
\u3010\u51fa\u529b\u524d\u3011src\/index.html<\/h5>\n
<!doctype html>\n<html lang=\"ja\">\n  <head><meta charset=\"utf-8\">\n    <title>Hello Vue<\/title>\n  <\/head>\n  <body>\n  <div id=\"app\">{{ message }}<\/div>\n  <\/body>\n<\/html><\/pre> 
\u3010\u51fa\u529b\u5f8c\u3011dist\/index.html<\/h5>\n
<!doctype html>\n<html lang=\"ja\">\n  <head><meta charset=\"utf-8\">\n    <title>Hello Vue<\/title>\n  <\/head>\n  <body>\n  <div id=\"app\">{{ message }}<\/div>\n  <script src=\"\/dist\/vendor.js\"><\/script> <!-- \u2190 \u30b3\u30b3\u304c\u81ea\u52d5\u8ffd\u52a0\u3055\u308c\u308b -->\n  <script src=\"\/dist\/index.js\"><\/script>  <!-- \u2190 \u30b3\u30b3\u304c\u81ea\u52d5\u8ffd\u52a0\u3055\u308c\u308b -->\n  <\/body>\n<\/html><\/pre>\n\u4ee5\u4e0a\u3067\u3059\u3002
\n
\n\u7d30\u304b\u3044\u8aac\u660e\u306f\u7701\u304d\u307e\u3057\u305f\u304c\u3001MPA\u3067webpack\u3092\u5229\u7528\u3059\u308b\u969b\u306e\u304a\u304a\u307e\u304b\u306a\u30dd\u30a4\u30f3\u30c8\u7d39\u4ecb\u3067\u3057\u305f\u3002
\nwebpack\u306b\u3064\u3044\u3066\u306f\u3001\u307e\u3060\u307e\u3060\u81ea\u5206\u3082\u308f\u304b\u3089\u306a\u3044\u3053\u3068\u3060\u3089\u3051\u3067\u60aa\u6226\u82e6\u95d8\u3057\u3066\u304a\u308a\u307e\u3059\u3002
\n
\n\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u8a73\u3057\u3044\u65b9\u3001\u30ad\u30fc\u30fb\u30dd\u30a4\u30f3\u30c8\u3067\u306f\u5927\u52df\u96c6\u4e2d\u3067\u3059\u3002\u304a\u5f85\u3061\u3057\u3066\u304a\u308a\u307e\u3059\u3002
\n
\n<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\u3002 \u73fe\u5728\u306eWeb\u30a2\u30d7\u30ea\u958b\u767a\u306f\u3001\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u304c1\u3064\u3060\u3051\u306eSPA\uff08\u30b7\u30f3 … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":12,"featured_media":107225,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,10],"tags":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107125"}],"collection":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/comments?post=107125"}],"version-history":[{"count":102,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107125\/revisions"}],"predecessor-version":[{"id":107228,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/107125\/revisions\/107228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/media\/107225"}],"wp:attachment":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/media?parent=107125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/categories?post=107125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/tags?post=107125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}