# ==Webpack 懶人包== #

----------------------------------------------------------------------------

#### ~~step.0 要有node環境ㄡ，沒有還想用webpack~~

#### step.1 開一個新資料夾 在你的工作區

#### step.2 然後cmd 進入你的資料夾

#### step.3 下 npm init --yes

#### step.4 然後下 npm install webpack webpack-cli --save-dev

#### step.5 新增檔案 webpack.config.js / index.js / index.html

#### step.6 設定你的 webpack.config.js 如下

const path = require('path');
module.exports = {
    entry: './index.js', // 是我們的進入點，我指定路徑是 index.js 通常會用個資料夾包起來這邊先求一個方便
    output: {
        filename: 'index.bundle.js', // 打包出來是 index.bundle.js
        path: path.resolve(__dirname, 'dist'), // 路徑會開個資料夾(dist)放進去
    }
};

#### step.7 設定你的 package.json 如下

  "scripts": {
	  // 這是監聽模式，不用讓你瘋狂下指令
    "watch": "webpack --mode development --watch",
		// 這是一般打包指令
    "start": "webpack --mode development",
		// 這是最後的最後的打包指令，會幫你做程式碼壓縮
    "build": "webpack --mode production"
  },

#### step.8 打包看看有沒有問題 npm run watch

##### 有檔案代表OK

#### step.9 index.html 匯入打包好的檔案


#### step.10 index.js console.log試試看


#### step.11 接下來載入 babel-loader 讓你的新版本JS可以被通用 !!要裝這個才能用import

npm install -D babel-loader @babel/core @babel/preset-env webpack

##### --save-dev = -D //在npm 版本6以後可免打

#### step.12 新增你的 webpack.config.js 如下

    module: {
      rules: [
        {
          test: /\.m?js$/, // 使用正則表達式找
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader', // 使用babel-loader
            options: {presets: ['@babel/preset-env']}
          }
        }
      ],
    },

---


#### step.13 測試一下 在你的 index.js 寫一些ES6的語法 我這邊寫的是 Arrow Function

let arr = [1, 2, 3, 4, 5]
arr = arr.map(num => num * 2)
console.log(arr)

---

##### 看到他幫你轉成低版本的JS 就成功囉


#### step.14 接下來我們安裝css，在webpack他連css都不認得呢

1. npm install --save-dev css-loader
2. npm install --save-dev style-loader

#### step.15 新增style.css 並打點東西吧


#### step.16 回到webpack.config.js 設定一下

    watch: true,
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: 'style-loader' // 使用 style-loader
            },
            {
              loader: 'css-loader' // 使用 css-loader
            }
          ]
        },
      ]
    }


#### step.17 匯入你的css 並測試看看 npm run watch

import './style.css'

##### OK !

#### step.18 使用SASS(SCSS) 他當然也不認識SASS

1. npm install sass -D // 載入SASS
2. npm install sass-loader --save-dev

#### step.19 新增style.sass 並打點什麼


#### step.20 回到webpack.config.js 設定一下

{
    test: /\.(scss|sass)$/,
    use: [
			{
				loader: 'style-loader'
			},
			{
				loader: 'css-loader'
			},
			{
				loader: 'sass-loader' // 使用 sass-loader 3個loader都要用上才行
			}
  ]
}


#### step.21 在index.js 匯入你的SASS檔

import './style.sass'


#### step.22 測試看看吧

npm run watch

##### OK !

#### steo.23 模組化開發 export / import ?

##### 開一個js檔 Menu.js

export default function Menu() {
  console.log('It is Menu')
} // 他就像return


##### index.js 那邊要匯入，匯入後就可以使用囉

import Menu from "./menu.js"
console.log(Menu())


---

##### OK !

#### 附上官網文檔

	https://webpack.js.org/loaders/

#### Webpack 是各種麻煩呢 都要自己載loader 包括ESLint喔 !! npm來的東西都放在index.js那邊是集中地

#### **引用資料** ####

https://medium.com/i-am-mike/%E4%BB%80%E9%BA%BC%E6%98%AFwebpack-%E4%BD%A0%E9%9C%80%E8%A6%81webpack%E5%97%8E-2d8f9658241d

https://www.youtube.com/watch?v=vyI-Ko6fvKU

https://ithelp.ithome.com.tw/articles/10194056