diff --git a/README.md b/README.md index aa8ffb1..cc1f469 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,7 @@ intro to webpack. ### Translations - [Chinese Traditional](https://github.com/AriaFallah/WebpackTutorial/tree/master/zh-TW) + +### Gitbook + +- [Webpack Tutoiral Gitbook 繁體中文](https://github.com/neighborhood999/webpack-tutorial-gitbook) diff --git a/part1/README.md b/part1/README.md index 0ac096b..fee08ba 100644 --- a/part1/README.md +++ b/part1/README.md @@ -186,7 +186,7 @@ The really cool, and interesting thing about webpack is that you can `require` m JavaScript files. There is this thing in webpack called a loader. Using these loaders, you can -`require` anything from `.css` and `.html` to `.png` files. +`require` anything from `.css` and `.png` to `.html` files. For example in the diagram above I had @@ -300,7 +300,7 @@ Going over the new properties one by one: This time, when you run `webpack`, now that you have the `UglifyJsPlugin` this could reduce your imaginary 900KB file to 200KB through processes such as removing all the whitespace. -You can also add the [OccurenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin) +You can also add the [OccurrenceOrderPlugin](https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin) > Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids. This makes ids predictable, reduces to total file size and is recommended. @@ -323,7 +323,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin() + new webpack.optimize.OccurrenceOrderPlugin() ] } ``` @@ -387,7 +387,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin() + new webpack.optimize.OccurrenceOrderPlugin() ], module: { loaders: [{ @@ -470,7 +470,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) @@ -622,7 +622,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) diff --git a/part1/css-extract/webpack.config.prod.js b/part1/css-extract/webpack.config.prod.js index e6078a4..6a1aaac 100644 --- a/part1/css-extract/webpack.config.prod.js +++ b/part1/css-extract/webpack.config.prod.js @@ -16,7 +16,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), diff --git a/part1/example1/README.md b/part1/example1/README.md index 9e88c0d..e60968b 100644 --- a/part1/example1/README.md +++ b/part1/example1/README.md @@ -72,7 +72,7 @@ The really cool and interesting thing about webpack is that you can `require` mo javascript files. There is this thing in webpack called a loader. Using these loaders, you can -`require` anything from `.css` and `.html` to `.png` files. +`require` anything from `.css` and `.png` to `.html` files. For example in the diagram above I had diff --git a/part1/example1/webpack.config.js b/part1/example1/webpack.config.js index 04c29eb..10baa40 100644 --- a/part1/example1/webpack.config.js +++ b/part1/example1/webpack.config.js @@ -13,7 +13,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin() + new webpack.optimize.OccurrenceOrderPlugin() ], module: { loaders: [{ diff --git a/part1/example3/webpack.config.js b/part1/example3/webpack.config.js index 0b24833..2e1056f 100644 --- a/part1/example3/webpack.config.js +++ b/part1/example3/webpack.config.js @@ -13,6 +13,6 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin() + new webpack.optimize.OccurrenceOrderPlugin() ] } diff --git a/part1/example4/webpack.config.js b/part1/example4/webpack.config.js index 04c29eb..10baa40 100644 --- a/part1/example4/webpack.config.js +++ b/part1/example4/webpack.config.js @@ -13,7 +13,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin() + new webpack.optimize.OccurrenceOrderPlugin() ], module: { loaders: [{ diff --git a/part1/example5/webpack.config.js b/part1/example5/webpack.config.js index 6bab936..0963301 100644 --- a/part1/example5/webpack.config.js +++ b/part1/example5/webpack.config.js @@ -14,7 +14,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) diff --git a/part1/example6/webpack.config.prod.js b/part1/example6/webpack.config.prod.js index ed72d58..387cd73 100644 --- a/part1/example6/webpack.config.prod.js +++ b/part1/example6/webpack.config.prod.js @@ -15,7 +15,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) diff --git a/part1/example7/webpack.config.prod.js b/part1/example7/webpack.config.prod.js index ed72d58..387cd73 100644 --- a/part1/example7/webpack.config.prod.js +++ b/part1/example7/webpack.config.prod.js @@ -15,7 +15,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) diff --git a/part1/html-reload/webpack.config.prod.js b/part1/html-reload/webpack.config.prod.js index 8c60d7a..03e1d09 100644 --- a/part1/html-reload/webpack.config.prod.js +++ b/part1/html-reload/webpack.config.prod.js @@ -15,7 +15,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), diff --git a/part2/README.md b/part2/README.md index 3e603f7..b60e3e4 100644 --- a/part2/README.md +++ b/part2/README.md @@ -168,7 +168,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) @@ -218,8 +218,8 @@ by an extreme amount. `include` prevents this by specifying that this loader only applies to `.js` files in your `src` directory. -Alternatively you could change `include: path.join(__dirname, 'src')` to `exclude: /node_modules/` which will then -include everything but the `node_modules` folder. More information can be found [here](https://webpack.github.io/docs/configuration.html#module-loaders). +Alternatively you could change `include: path.join(__dirname, 'src')` to `exclude: /node_modules/` which will then +include everything but the `node_modules` folder. More information can be found [here](https://webpack.github.io/docs/configuration.html#module-loaders). ## We are Done? @@ -291,7 +291,7 @@ plugins: [ warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), @@ -365,15 +365,16 @@ that eslint lets you inherit from other people's configs. I always like to use a To get started, we need to install eslint as well as airbnb's config - npm install -g eslint - npm install --save-dev eslint eslint-config-airbnb + npm install eslint + npm install -g eslint-cli + npm install --save-dev eslint eslint-config-airbnb-base Our starting config will look like: ```javascript // .eslintrc { - "extends": "airbnb/base" // 'airbnb/base' because 'airbnb' assumes usage of react + "extends": "airbnb-base" // 'airbnb-base' because 'airbnb' assumes usage of react } ``` @@ -383,7 +384,7 @@ all these rules mean, or tweak them to fit your preferences look [here](http://e ```javascript // .eslintrc { - "extends": "airbnb/base", + "extends": "airbnb-base", "rules": { "comma-dangle": 0, "no-console": 0, @@ -405,7 +406,7 @@ and tweaking our config once more to add [babel specific rules](https://github.c ```javascript // .eslintrc { - "extends": "airbnb/base", + "extends": "airbnb-base", "parser": "babel-eslint", "rules": { "comma-dangle": 0, diff --git a/part2/example1/package.json b/part2/example1/package.json index 6ae66e6..88de612 100644 --- a/part2/example1/package.json +++ b/part2/example1/package.json @@ -12,18 +12,18 @@ "author": "", "license": "MIT", "devDependencies": { - "babel-core": "^6.4.5", - "babel-eslint": "^4.1.8", - "babel-loader": "^6.2.2", - "babel-preset-es2015": "^6.3.13", - "babel-preset-stage-2": "^6.3.13", + "babel-core": "^6.9.1", + "babel-eslint": "^6.0.4", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.9.0", + "babel-preset-stage-2": "^6.5.0", "css-loader": "^0.23.1", - "eslint": "^1.10.3", - "eslint-config-airbnb": "^5.0.0", - "eslint-plugin-babel": "^3.1.0", - "html-webpack-plugin": "^2.8.1", - "style-loader": "^0.13.0", - "webpack": "^1.12.13", + "eslint": "^2.12.0", + "eslint-config-airbnb-base": "^3.0.1", + "eslint-plugin-babel": "^3.2.0", + "html-webpack-plugin": "^2.21.0", + "style-loader": "^0.13.1", + "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" }, "dependencies": { diff --git a/part2/example1/webpack.config.prod.js b/part2/example1/webpack.config.prod.js index b984c05..6ef5a28 100644 --- a/part2/example1/webpack.config.prod.js +++ b/part2/example1/webpack.config.prod.js @@ -17,7 +17,7 @@ module.exports = { warnings: false, }, }), - new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.OccurrenceOrderPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), diff --git a/zh-TW/part1/README.md b/zh-TW/part1/README.md index f995ca0..35a4725 100644 --- a/zh-TW/part1/README.md +++ b/zh-TW/part1/README.md @@ -12,7 +12,7 @@ ## 需求 -至少，希望你了解基本的 node.js 和 npm。 +至少希望你了解基本的 node.js 和 npm。 ## 貢獻 @@ -26,7 +26,7 @@ * [Bundling](#bundling) * [Loaders](#loaders) * [Plugins](#plugins) -* [你的設定檔案](#你的設定檔案) +* [你的 webpack 設定檔案](#你的-webpack-設定檔案) * [一個簡單的範例](#一個簡單的範例) * [介紹 Plugins](#介紹-plugins) * [一個更完整的範例](#一個更完整的範例) @@ -41,10 +41,10 @@ 因為每個 react 或 redux 教學課程都假設你知道什麼是 webpack。:cry: -以下這些是更現實的原因，你可能需要使用 webpack。 +以下這些是更現實的原因，你可能會需要使用 webpack。 你可以： - * Bundle 你的 js 檔案變成單一的檔案 + * 將你的 js 檔案 Bundle 變成單一的檔案 * 在你的前端程式碼中使用 npm packages * 撰寫 JavaScript ES6 或 ES7（需要透過 babel 來幫助） * Minify 或優化程式碼 @@ -55,18 +55,18 @@ ##### 為什麼我需要這些功能？ -* Bundle JS 檔案 - 讓你可以撰寫模組化的 JavaScript，但是你不需要 inclue 每個 JavaScript `