Hi, webpack!

├── .node-version ├── src ├── style.css ├── style.scss ├── logo.png ├── utilities.js ├── index.html └── index.js ├── .babelrc ├── docker └── app │ └── Dockerfile ├── .eslintrc.json ├── docker-compose.yml ├── package.json ├── webpack.config.js ├── .gitignore └── README.md /.node-version: -------------------------------------------------------------------------------- 1 | v10.15.0 2 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | .haikei { 2 | background-color: #8dd6f9; 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } 4 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #FF5733; 2 | 3 | div { 4 | color: $primary-color; 5 | } 6 | -------------------------------------------------------------------------------- /src/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiveIntoHacking/webpack-crash-course/HEAD/src/logo.png -------------------------------------------------------------------------------- /docker/app/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:10.15.0 2 | 3 | ENV APP_PATH=/app 4 | RUN mkdir $APP_PATH 5 | WORKDIR $APP_PATH 6 | -------------------------------------------------------------------------------- /src/utilities.js: -------------------------------------------------------------------------------- 1 | export function NiJou(num) { 2 | return num ** 2; 3 | } 4 | 5 | export const NAME = 'Ham' 6 | 7 | export default class Lion { 8 | static say() { 9 | return 'Roar' 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": "airbnb", 6 | "parser": "babel-eslint", 7 | "rules": { 8 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | services: 3 | app: 4 | build: docker/app 5 | volumes: 6 | - .:/app 7 | - .bash_history:/home/node/.bash_history 8 | ports: 9 | - "3000:3000" 10 | user: node 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hi, webpack! 6 | 7 | 8 |

9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './style.css'; 4 | import './style.scss'; 5 | 6 | ReactDOM.render( 7 |

Hello, React!

, 8 | document.getElementById('root'), 9 | ); 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-crash-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "launch": "webpack-dev-server --open --mode production", 8 | "start": "webpack-dev-server --open --mode development" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/DiveIntoHacking/webpack-crash-course.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/DiveIntoHacking/webpack-crash-course/issues" 19 | }, 20 | "homepage": "https://github.com/DiveIntoHacking/webpack-crash-course#readme", 21 | "devDependencies": { 22 | "@babel/core": "^7.2.2", 23 | "@babel/preset-env": "^7.3.1", 24 | "@babel/preset-react": "^7.0.0", 25 | "babel-eslint": "^10.0.1", 26 | "babel-loader": "^8.0.5", 27 | "css-loader": "^2.1.0", 28 | "eslint": "^5.13.0", 29 | "eslint-config-airbnb": "^17.1.0", 30 | "eslint-loader": "^2.1.2", 31 | "eslint-plugin-import": "^2.16.0", 32 | "eslint-plugin-jsx-a11y": "^6.2.1", 33 | "eslint-plugin-react": "^7.12.4", 34 | "file-loader": "^3.0.1", 35 | "html-loader": "^0.5.5", 36 | "html-webpack-plugin": "^3.2.0", 37 | "live-server": "^1.2.1", 38 | "mini-css-extract-plugin": "^0.5.0", 39 | "node-sass": "^4.11.0", 40 | "optimize-css-assets-webpack-plugin": "^5.0.1", 41 | "sass-loader": "^7.1.0", 42 | "style-loader": "^0.23.1", 43 | "uglifyjs-webpack-plugin": "^2.1.1", 44 | "url-loader": "^1.1.2", 45 | "webpack": "^4.29.0", 46 | "webpack-cli": "^3.2.1", 47 | "webpack-dev-server": "^3.1.14" 48 | }, 49 | "dependencies": { 50 | "lodash": "^4.17.11", 51 | "react": "^16.8.1", 52 | "react-dom": "^16.8.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | 7 | const outputPath = path.resolve(__dirname, 'dist'); 8 | 9 | module.exports = { 10 | entry: './src/index.js', 11 | output: { 12 | filename: 'main.js', 13 | path: outputPath, 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | enforce: 'pre', 19 | test: /\.jsx?$/, 20 | exclude: /node_modules/, 21 | loader: 'eslint-loader', 22 | }, 23 | { 24 | test: /\.jsx?$/, 25 | exclude: /node_modules/, 26 | loader: 'babel-loader', 27 | }, 28 | { 29 | test: /\.(sc|c)ss$/, 30 | use: [ 31 | MiniCssExtractPlugin.loader, 32 | 'css-loader', 33 | 'sass-loader', 34 | ], 35 | }, 36 | { 37 | test: /\.(jpe?g|png|gif|svg|ico)$/i, 38 | loader: 'url-loader', 39 | options: { 40 | limit: 2048, 41 | name: './images/[name].[ext]', 42 | }, 43 | }, 44 | { 45 | test: /\.html$/, 46 | loader: 'html-loader', 47 | }, 48 | ], 49 | }, 50 | devServer: { 51 | contentBase: outputPath, 52 | }, 53 | plugins: [ 54 | new HtmlWebPackPlugin({ 55 | template: './src/index.html', 56 | filename: './index.html', 57 | }), 58 | new MiniCssExtractPlugin({ 59 | filename: '[name].[hash].css', 60 | }), 61 | ], 62 | optimization: { 63 | minimizer: [ 64 | new UglifyJsPlugin({ 65 | uglifyOptions: { 66 | compress: { 67 | drop_console: true, 68 | }, 69 | }, 70 | }), 71 | new OptimizeCSSAssetsPlugin({}), 72 | ], 73 | }, 74 | devtool: 'eval-source-map', 75 | }; 76 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | 82 | # Nuxt.js build / generate output 83 | .nuxt 84 | dist 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and not Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | 107 | # Stores VSCode versions used for testing VSCode extensions 108 | .vscode-test 109 | 110 | # yarn v2 111 | 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .pnp.* 116 | 117 | .bash_history 118 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webpack-crash-course 2 | 3 | 本リポジトリは、Udemyのプログラミングコース「モジュールバンドラーwebpackを1日で習得！しかもフルスクラッチでインストールからカスタマイズまでの手順を理解する」 4 | 5 | で実装したソースコードを管理するためのものです。 6 | 7 | ## 本セクションで扱うソースコード 8 | 9 | 「本セクションで扱うソースコード」は以下の`git clone`コマンドで取得することが可能です。 10 | 11 | ```bash 12 | $ git clone https://github.com/DiveIntoHacking/webpack-crash-course.git 13 | ``` 14 | 15 | 以下の表は、各レクチャーの名称とそのレクチャーで作成されたブランチ名との対応を示す表です。 16 | 17 | もし、レクチャーの中でうまく動作せず行き詰まったり、あるいは正常に動作はしたものの自分の書いたコードとの比較を行ったりするといった場合には、 18 | 各ブランチをcheckoutして参考にしてみてください。 19 | 全てレクチャーの収録時のソースコードと全く同じものをcommitしています。 20 | 21 | |レクチャー名|ブランチ名| 22 | |---|---| 23 | | いきなり！動かしてwebpackの全体像を把握しよう - webpack適用前 | getting-started-before-webpack | 24 | | いきなり！動かしてwebpackの全体像を把握しよう - webpack適用後 | getting-started-after-webpack | 25 | | webpack-dev-serverを導入して開発環境を整備しよう | webpack-dev-server | 26 | | 開発環境と本番環境の違いについて | - | 27 | | モジュールについて | modules | 28 | | css-loaderとstyle-loaderでスタイルを取り込もう | css-loader-and-style-loader | 29 | | url-loaderで画像を取り込もう、 file-loaderで画像をファイルとして取り込もう | url-loader | 30 | | sass-loaderでSassのコードを取り込もう | sass-loader | 31 | | babel-loaderやhtml-webpack-pluginを利用しReact開発環境を構築しよう | babel-loader-and-react-development | 32 | | mini-css-extract-plugin でスタイルをcssファイルに分離しよう | mini-css-extract-plugin | 33 | | uglifyjs-webpack-plugin でconsole.log関数の自動削除をしよう | uglifyjs-webpack-plugin | 34 | | optimize-css-assets-webpack-plugin でスタイルシートを圧縮しよう | optimize-css-assets-webpack-plugin | 35 | | ソースマップを生成しよう | source-map | 36 | | eslint-loaderでJavaScriptの静的解析をリアルタイムに実行しよう | eslint-loader | 37 | 38 | ## 注意事項 39 | 40 | 本コースでは、様々なnpm パッケージをインストールしますが、全て、バージョンを特定してインストールしています。 41 | 42 | 動画の内容と同じ動作を保証するためには同じバージョンのパッケージをインストールする必要がありますが、動画の中でもバージョンを指定したインストールの方法を指示していますので、その通りに実行してみてください。 43 | 44 | 例えば、webpackをインストールする場合は、以下の方法を推奨します。 45 | 46 | 47 | ```bash 48 | $ npm install --save-dev webpack@4.29.0 49 | ``` 50 | 51 | 以下のようにバージョンを未指定でインストールした場合は、最新のバージョンのパッケージがインストールされることになり、動画の中で紹介している挙動やUIとは異なるものになる可能性がありますので、非推奨です。 52 | 53 | もし以下のようにされる場合は自己責任で行なってください。 54 | 55 | ```bash 56 | $ npm install --save-dev webpack 57 | ``` 58 | 59 | ## FAQ 60 | 61 | gitやGitHubに慣れていない方から寄せられる質問をまとめています。 62 | 63 | ### リポジトリの変更などを知る方法はありますか？ 64 | 65 | こちらのリポジトリのトップページの画面上部にある 66 | 67 | starボタンをクリックすると、GitHubのトップページのタイムラインにそのリポジトリを追跡することができますのでやってみてください。 68 | 69 | ### 自分のアカウントにリポジトリをぶら下げたいのですが。。。 70 | 71 | forkすることで可能です。画面右上の`Fork`ボタンをクリックしてください。 72 | 73 | ### リポジトリを新規にcloneを行い、該当のブランチにcheckoutする方法は？ 74 | 75 | `git clone`後に、例えば、`modules`というブランチをcheckoutしたい場合を例にすると、以下のようにコマンドを実行することになります。 76 | 77 | ```bash 78 | $ git clone https://github.com/DiveIntoHacking/webpack-crash-course.git 79 | $ cd webpack-crash-course 80 | $ git checkout -t origin/modules 81 | ``` 82 | 83 | あるいは、下記のコマンドだとbranch名を指定することでワンラインで実行可能です。 84 | 85 | 86 | ```bash 87 | $ git clone --branch modules https://github.com/DiveIntoHacking/webpack-crash-course.git 88 | ``` 89 | 90 | ### ブランチ間の差分を知るには？ 91 | 92 | ブランチ間の差分を知るには以下のコマンドが有効です。 93 | 94 | 以下は、「いきなり！動かしてwebpackの全体像を把握しよう - webpack適用前」で実装したコードと「いきなり！動かしてwebpackの全体像を把握しよう - webpack適用後」で実装したコードとの差分を出力するコマンドになります。 95 | 96 | このように、ブランチ名をdot二つで繋げることでブランチ間の差分を調べることができますので試してみてください。 97 | 98 | ```bash 99 | $ git diff origin/getting-started-before-webpack..origin/getting-started-after-webpack 100 | ``` 101 | 102 | ### プログラムの誤りを見つけてたがその連絡の手段は？ 103 | 104 | 本プログラムはUdemy教育用のものですので、受講生からのリクエストを最優先していますので、Udemyのコースに設置されている公式のQ&Aにてご指摘の内容をご報告頂ければ有り難いです。 105 | (本プログラムはオープンソースプロジェクトではありませんのでGitHubのIssuesでお知らせ頂いても対応出来ない場合がありますのでご了承ください。) 106 | 107 | その他、不明な点が有りましたらUdemyのQ&Aにてご質問ください。 108 | 109 | 110 | ## 動画コース一覧 111 | 112 | 他にも以下のコースをUdemyにて公開中です。 113 | 114 | 115 | |タイトル|概要| 116 | |---|---| 117 | |[フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門](https://www.udemy.com/react-application-development/?couponCode=GITHUB-REPO-README)|RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう| 118 | |[GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ！](https://www.udemy.com/graphql-with-react/?couponCode=GITHUB-README-FOOTER)|GraphQLの言語仕様を学習し、GitHubのGraphQL APIと連携するReactアプリケーションの実装にチャレンジします！React/GraphQL/Apollo等を利用し、近未来を見据えたAPI開発手法を先取りしよう！| 119 | |[モジュールバンドラーwebpackを1日で習得！しかもフルスクラッチでインストールからカスタマイズまでの手順を理解する](https://www.udemy.com/webpack-crash-course/?couponCode=GITHUB-README-FOOTER)|Reactを題材にし各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)でバンドルする方法をハンズオンで解説、今回もGitHubにソース完全公開| 120 | |[React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう！](https://www.udemy.com/react-hooks-101/?couponCode=GITHUB-README-FOOTER)|Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう！| 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 |

129 | 130 | [はむさんのオンラインスクール](https://diveintohacking.com/) 131 | 132 |

133 | 134 | 135 | 136 | 137 | --------------------------------------------------------------------------------