在上一篇簡介文章是介紹了我們為什要用webpack來管理我們的專案檔。
首先，我先附上以下練習完成後的專案檔連結
接下來，以下的操作步驟，就是將一個專案從無到有創建出來，並用webpack來管理的過程

webpack專案創建操作步驟

step1.
首先，我們先在專案檔裡面新增一個src資料夾，並在裡面新增兩個js檔案，分別為main.js和helper.js。
那main.js檔案，就是做為webpack的進入點檔案用。
那helper.js檔案，就是我們自己主要撰寫js的部分。
所以，我們先在helper.js檔案中加入我們想要撰寫的js內容

---helper.js---
export default {
  fn () {
    console.log('這是一支程式碼')
  }
}

接著，我們在main.js中注入這個helper.js檔案。

1
2
3

---main.js---
import helpers from './helper'
helpers.fn()  // 可以直接調用helper.js檔案裡面的函式囉~

webpack可以用ES6的語法
在webpack可以用ES6來撰寫，故可以用import, export。
因此，我們就可以在某些js檔案，利用export default{}，將這些js檔案的內容輸出出來，且一支js檔案只會有一個export default{}，而export default{}會以物件的型式匯出來。

step2.
但是，因為在step1的階段，我們還沒有安裝webpack，所以，以step1那樣撰寫式不會有任何webpack的作用喔。
那接下來就來安裝webpack到專案檔中。
首先，因為，我們都是使用nodeJS。
那使用nodeJS的話，都會在你的專案檔中，產生一個叫做package.json的檔案。
那這個檔案是用來儲存你這個專案檔中會使用到的nodeJS的套件。
所以，輸入npm init指令，就會直接產生一個還沒有任何紀錄任何相依套件的package.json檔案了。

step3.
輸入npm install ，安裝node_modules。

step4.
接著，輸入npm install webpack webpack-cli --save，使用這個指令來安裝webpack和webpack-cli套件。
那要特別說明--save這個指令，會將你安裝的套件儲存到你在step2產生的package.json檔案裡面。
這個好處是，將專案檔上傳網站時(像github)，可以不用上傳 node_modules，本地端電腦只要執行 npm install 就會依照 package.json 裡面所記載的套件版本去安裝套件，安裝完後，就可以順利執行你的專案檔內容囉~

–save-dev

你會在有些安裝套件的安裝指令上看到--save-dev，那這個-dev的意思是developement參數，但是，因為課程裡面只教怎麼安裝webpack整個環境，
所以，都將--save-dev後面的-dev給去掉了，因為，不是本課程專注的地方。

接著，直接在專案檔中新增一個webpack.config.js檔案。
並在此檔案中，貼上說明文件中，有關出口的內容。

const path = require('path'); // nodejs指向實體路徑的位置

module.exports = {
  entry: './path/to/my/entry/file.js',  // 指向專案檔裡面注入點的main.js檔案
  output: {
    path: path.resolve(__dirname, 'dist'),  // 這個注入點檔案輸出的位置，所以，當我們執行webpack時，這個注入點檔案，會被輸出到dist資料夾中，而且它的檔名會叫做main.bundle.js
    filename: 'main.bundle.js'          // 注入點輸出的檔名，你可以隨便命名
  }
};

step5.
接著，我們為了要讓package.json可以直接執行webpack，所以，我們要對package.json調整一下。
到package.json檔案中，
有一個”scripts”的部分，那這個部分是用來定義你的npm指令的功能。
所以，我們在”scripts”的部分定義一個指令build

---package.json檔案---
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

step6.
接著，輸入npm run build指令，就可以直接執行webpack的功能。
接著，你就會看到專案檔中會產生出一個dist的資料夾，並且裡面有一個main.bundle.js檔案，main.js檔案經過webpack編譯，產生出的檔案囉。

在src資料夾產出index.html

step7.
首先，我們自己手動新增一個index.html檔案，在src檔案。
那你不需要在這個index.html檔案中，自己手動引入會用到的scss或js檔案，因為，當你執行webpack編譯指令之後，它會自己幫你加進去，如果，你在這邊野家的話，會導致最後連需引入相同的檔案兩次喔。

step8.
安裝 html-webpack-plugin，這個plugin，會將現有的html檔案產生到dist資料夾中。
首先，輸入指令npm install --save html-webpack-plugin來安裝這個plugin。
接著，到webpack.confin.js做設定

---webpack.confin.js---
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')  // 引入HtmlWebpackPlugin

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'   // 我們希望HtmlWebpackPlugin編譯的html檔案路徑
    })
  ],
}

step9.
你要安裝html loader，不然，webpack也不認識html這類型的檔案。
所以，先輸入指令npm install --save html-loader，安裝html loader。
接著，去webpack.confin.js檔案中，加入html-loader編譯的內容

---webpack.confin.js---
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
};

step10.
接著，你輸入npm run build，來執行webpack編譯，成功的話你應該可以看到妳的dist資料夾中，會產生一個index.html檔案。

新增css loader的部分

step11.
因為，js檔案本身webpack認識它，所以，不需要為js檔案額外引入其他的套件。
但是，像css, png, scss, jpg這類的檔案，webpack本身是不認識他們的，更根本的說，是nodeJS不認得這些類型的檔案，
所以，我們要為這些類型的檔案安裝loader，來封裝這些檔案，讓webpack可以認識它們，並利用webpack來對它們進行處理。
首先，以css為例
輸入指令npm install --save css-loader ，將css-loader安裝進來。
輸入指令npm install --save style-loader ，將style-loader安裝進來。
安裝完畢之後，在官網說明文件，有說明loader要在webpack.config.js檔案裡面加入那些內容，來引入這些loader檔案。

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [  // 代表模組的規則
      {
        test: /\.css$/i,  // 代表檔案的副檔名
        use: ["style-loader", "css-loader"],  // 代表此類型的檔案，要用那些loader來解譯它們
      },
    ],
  },
};

step12.
接下來，我們新增一個css檔案，來試試看是否剛剛在webpack.config.js引入的內容是否成功。
首先，我們新增一個all.css檔案。

---all.css--
body {
  background-color: red;
}

第二，在main.js檔案中引入這個all.css

---main.js---
import helpers from './helper'
import './all.css'   // 引入all.css

helpers.fn()

第三，
輸入npm run build，來重新編譯我們剛剛新增的內容，如此，應該就可以看到你的網頁背景色被改成紅色囉，那就代表成功了。

step13.
我們想要webpack也可以編譯scss檔案，所以，我們要安裝scss loader
你就直接去scss loader官網，找到安裝的相關指令。
接著輸入指令npm install sass-loader sass webpack --save
接著，在webpack.config.js檔案中的modules，加入scss loader的內容。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

接著，新增一個scss檔案。

---all.scss---
$primary: blue;

body {
  background-color: $primary;
}

第三，在main.js檔案中，注入這個all.scss檔案。

import helpers from './helper'
// import './all.css'  // 把原本引入all.css內容槓掉
import "./all.scss";
helpers.fn()

第四，輸入指令npm run build，如此，應該就可以看到網頁有吃到你在all.scss檔案中修改的css樣式囉。

小總結

step14.
經過以上的步驟，就是webpack引入套件並加入到注入檔案的方法了。
所以，往後如果你有需要再加入其他的框架像是jade這種，你就去往上搜尋jade loader。
接著，再webpack.config.js檔案中加入這個loader套件的相關內容，接著，再將相關類型的檔案注入到main.js檔案中，就可以在你的專案檔裡面使用囉。

———————–我是分隔線———————

HMR -> webpack-dev-server

接下來，紀錄一下webpack的webserver功能。
那webpack的webserver功能是用在當你修改完專案檔中的任一內容後，會直接同步將你修改的內容呈現在網頁上囉。
那在官方說明文件中，有說明怎麼安裝它。
首先，輸入指令npm install --save webpack-dev-server
第二，將相關的內容加入到webpack.config.js的modules裡面，

---webpack.config.js---
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  devServer: {  // 加入devServer 套件
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
      
    ]
  },
};

第三，
我們要到package.json檔案中加入執行webpack dev server的相關功能指令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack server --open",  // 加入dev server的執行指令
  "build": "webpack"
},

接著，輸入npm run start指令，就可以直接開啟你的專案檔網頁。
並且，你直接修改專案檔內的任一內容，就可以直接呈現在你的網頁上囉。

那要特別注意的是，dev server功能是不會產出一個正式的檔案的，即當你輸入npm run strat執行dev server的功能，是不會產生main.bundle.js檔案，
你得要額外自己輸入npm build即執行webpack的編譯功能，才會產出main.bundle.js檔案，由此看出來，這兩個指令是不會互相干擾的喔。

使用webpack dev-server的小插曲 - Cant find module錯誤

我在使用webpack dev-server的時候，按照課堂上教的步驟安裝，並撰寫package.json裡面的start指令，
原本課堂上的start指令是 “start” : “webpack-dev-serve –open” ，
但是，我輸入npm run start，會跳出Cannot find module ‘webpack-cli/bin/config-yargs’ 的錯誤。
那我找了github上面有關dev-server的issue，那我在這一則的最後面，一位ID是Elmar101所提供的解法，
把start指令是 "start" : "webpack-dev-serve --open" 改成 "start" : "webpack serve --open" 之後，
再輸入npm run start，就可以順利執行webpack dev-server的功能了，感動~~~
我在這個專案檔中的package.json內容為以下，

---package.json---
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^5.2.1",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

用以上的webpack的相關套件的版本是可以成功運行webpack-dev-server的喔~~

Landy Blog

建立webpack環境操作步驟紀錄