Skip to content

Commit

Permalink
optimize: webpack 3.x => 4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@ics-ikeda
ics-ikeda committed Feb 26, 2018
1 parent 4b7b1a4 commit 862d572
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 24 deletions.
2 changes: 0 additions & 2 deletions tutorial-optimize/build/bundle.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion tutorial-optimize/build/bundle.js.map
View file

This file was deleted.

4 changes: 2 additions & 2 deletions tutorial-optimize/build/index.html → tutorial-optimize/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<html>
<head>
<meta charset="UTF-8" />
<script defer src="bundle.js"></script>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
</html>
98 changes: 98 additions & 0 deletions tutorial-optimize/dist/main.js
View file
Original file line number Diff line number Diff line change
@@ -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?");

/***/ })

/******/ });
6 changes: 4 additions & 2 deletions tutorial-optimize/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"build": "webpack"
},
"devDependencies": {
"webpack": "^3.6.0"
}
"webpack": "^4.0.0",
"webpack-cli": "^2.0.9"
},
"private": true
}
0 tutorial-optimize/src/main.js → tutorial-optimize/src/app.js
View file
File renamed without changes.
25 changes: 8 additions & 17 deletions tutorial-optimize/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -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'
}
};

0 comments on commit 862d572

Please sign in to comment.