From 862d572dad0461438b92050017d9ed43b67c5879 Mon Sep 17 00:00:00 2001 From: ics-ikeda Date: Mon, 26 Feb 2018 18:15:24 +0900 Subject: [PATCH] optimize: webpack 3.x => 4.0 --- tutorial-optimize/build/bundle.js | 2 - tutorial-optimize/build/bundle.js.map | 1 - tutorial-optimize/{build => dist}/index.html | 4 +- tutorial-optimize/dist/main.js | 98 ++++++++++++++++++++ tutorial-optimize/package.json | 6 +- tutorial-optimize/src/{main.js => app.js} | 0 tutorial-optimize/webpack.config.js | 25 ++--- 7 files changed, 112 insertions(+), 24 deletions(-) delete mode 100644 tutorial-optimize/build/bundle.js delete mode 100644 tutorial-optimize/build/bundle.js.map rename tutorial-optimize/{build => dist}/index.html (62%) create mode 100644 tutorial-optimize/dist/main.js rename tutorial-optimize/src/{main.js => app.js} (100%) diff --git a/tutorial-optimize/build/bundle.js b/tutorial-optimize/build/bundle.js deleted file mode 100644 index 28ab09e..0000000 --- a/tutorial-optimize/build/bundle.js +++ /dev/null @@ -1,2 +0,0 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1);Object(r.a)()},function(e,t,n){"use strict";function r(){document.body.innerHTML="helloメソッドが実行された。",console.log("helloメソッドが実行された。")}t.a=r}]); -//# sourceMappingURL=bundle.js.map \ No newline at end of file diff --git a/tutorial-optimize/build/bundle.js.map b/tutorial-optimize/build/bundle.js.map deleted file mode 100644 index 7280604..0000000 --- a/tutorial-optimize/build/bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack:///bundle.js","webpack:///webpack/bootstrap d4d9482e184000267e4e","webpack:///./src/main.js","webpack:///./src/sub.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","value","__WEBPACK_IMPORTED_MODULE_0__sub_js__","hello","document","body","innerHTML","console","log"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAI,EAAAJ,EACAK,GAAA,EACAH,WAUA,OANAJ,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,GAAA,EAGAF,EAAAD,QAvBA,GAAAD,KA4BAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,SAAAP,EAAAQ,EAAAC,GACAZ,EAAAa,EAAAV,EAAAQ,IACAG,OAAAC,eAAAZ,EAAAQ,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAZ,EAAAmB,EAAA,SAAAf,GACA,GAAAQ,GAAAR,KAAAgB,WACA,WAA2B,MAAAhB,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAJ,GAAAU,EAAAE,EAAA,IAAAA,GACAA,GAIAZ,EAAAa,EAAA,SAAAQ,EAAAC,GAAsD,MAAAR,QAAAS,UAAAC,eAAAjB,KAAAc,EAAAC,IAGtDtB,EAAAyB,EAAA,GAGAzB,IAAA0B,EAAA,KDMM,SAAUtB,EAAQuB,EAAqB3B,GAE7C,YACAc,QAAOC,eAAeY,EAAqB,cAAgBC,OAAO,GEtElE,IAAAC,GAAA7B,EAAA,EAIAc,QAAAe,EAAA,MF4EM,SAAUzB,EAAQuB,EAAqB3B,GAE7C,YGlFA,SAAA8B,KACAC,SAAAC,KAAAC,UAAA,mBACAC,QAAAC,IAAA,oBHiFiCR,EAAuB,EAAIG","file":"bundle.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__sub_js__ = __webpack_require__(1);\n// import()メソッドを使ってsub.jsファイルを読み込む。\n\n\n// sub.jsに定義されたJavaScriptを実行する。\nObject(__WEBPACK_IMPORTED_MODULE_0__sub_js__[\"a\" /* hello */])();\n\n/***/ }),\n/* 1 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony export (immutable) */ __webpack_exports__[\"a\"] = hello;\nfunction hello() {\n document.body.innerHTML = 'helloメソッドが実行された。';\n console.log('helloメソッドが実行された。');\n}\n\n/***/ })\n/******/ ]);\n\n\n// WEBPACK FOOTER //\n// bundle.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap d4d9482e184000267e4e","// import()メソッドを使ってsub.jsファイルを読み込む。\nimport {hello} from './sub.js';\n\n// sub.jsに定義されたJavaScriptを実行する。\nhello();\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/main.js\n// module id = 0\n// module chunks = 0","export function hello() {\n document.body.innerHTML = 'helloメソッドが実行された。';\n console.log('helloメソッドが実行された。');\n}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/sub.js\n// module id = 1\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/tutorial-optimize/build/index.html b/tutorial-optimize/dist/index.html similarity index 62% rename from tutorial-optimize/build/index.html rename to tutorial-optimize/dist/index.html index 1248073..825b114 100644 --- a/tutorial-optimize/build/index.html +++ b/tutorial-optimize/dist/index.html @@ -2,8 +2,8 @@ - + - \ No newline at end of file + diff --git a/tutorial-optimize/dist/main.js b/tutorial-optimize/dist/main.js new file mode 100644 index 0000000..cceac79 --- /dev/null +++ b/tutorial-optimize/dist/main.js @@ -0,0 +1,98 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = "./src/app.js"); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./src/app.js": +/*!********************!*\ + !*** ./src/app.js ***! + \********************/ +/*! no exports provided */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sub_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sub.js */ \"./src/sub.js\");\n// import()メソッドを使ってsub.jsファイルを読み込む。\n\n\n// sub.jsに定義されたJavaScriptを実行する。\nObject(_sub_js__WEBPACK_IMPORTED_MODULE_0__[\"hello\"])();\n\n//# sourceURL=webpack:///./src/app.js?"); + +/***/ }), + +/***/ "./src/sub.js": +/*!********************!*\ + !*** ./src/sub.js ***! + \********************/ +/*! exports provided: hello */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"hello\", function() { return hello; });\nfunction hello() {\n document.body.innerHTML = 'helloメソッドが実行された。';\n console.log('helloメソッドが実行された。');\n}\n\n//# sourceURL=webpack:///./src/sub.js?"); + +/***/ }) + +/******/ }); \ No newline at end of file diff --git a/tutorial-optimize/package.json b/tutorial-optimize/package.json index a00e177..a8ac345 100644 --- a/tutorial-optimize/package.json +++ b/tutorial-optimize/package.json @@ -3,6 +3,8 @@ "build": "webpack" }, "devDependencies": { - "webpack": "^3.6.0" - } + "webpack": "^4.0.0", + "webpack-cli": "^2.0.9" + }, + "private": true } diff --git a/tutorial-optimize/src/main.js b/tutorial-optimize/src/app.js similarity index 100% rename from tutorial-optimize/src/main.js rename to tutorial-optimize/src/app.js diff --git a/tutorial-optimize/webpack.config.js b/tutorial-optimize/webpack.config.js index 1650083..0750217 100644 --- a/tutorial-optimize/webpack.config.js +++ b/tutorial-optimize/webpack.config.js @@ -1,24 +1,15 @@ -const webpack = require('webpack'); - module.exports = { + // モード値を production に設定すると最適化された状態で、 + // development に設定するとソースマップ有効でJSファイルが出力される + mode: 'development', + // メインとなるJavaScriptファイル（エントリーポイント） - entry: `./src/main.js`, + entry: `./src/app.js`, // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 - path: `${__dirname}/build`, + path: `${__dirname}/dist`, // 出力ファイル名 - filename: 'bundle.js' - }, - - // ソースマップを有効にする - devtool: 'source-map', - - plugins: [ - // JSファイルのminifyを実行する - new webpack.optimize.UglifyJsPlugin({ - // minify時でもソースマップを利用する - sourceMap: true - }) - ] + filename: 'main.js' + } };