【前端】webpack & webpack-dev-server @ 凱開 x 慵懶日子

自己總結XDDD

webpack 打包工具

webpack-dev-server 馬上產一個server讓你看執行結果!!!

2019/01/30(三)

webpack

網址：https://webpack.js.org/

喔喔喔有中文版的，以下也可以不用看拉QQ

也不知道要多久，才能從小廢廢變成大師嗚嗚嗚哈哈哈

其實我做了很久專案，都不知道這到底在幹嘛，現在也不知道在幹嘛

不要叫我垃圾，謝謝QQ

就是在某一天，就是那一天

我把檔案上傳到server上，網頁怎樣都不會變

我才知道下個指令，就會把所有東西弄一弄包一包全部弄到dist資料夾

阿阿阿阿阿阿，好像在變魔術阿

這就要從src跟dist資料夾開始說起，ㄟㄟㄟ其實我根本就不知道

阿好拉我還是正經一點不要講廢話好了

到底什麼是webpack

Webpack 是一個開源的前端打包工具。

Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。

Webpack可以從終端、或是更改 webpack.config.js 來設定各項功能。

要使用 Webpack 前須先安裝 Node.js。

Webpack 其中一個特性是使用載入器來將資源轉化成模組。開發者可以自訂載入器的順序、格式來因應專案的需求。

以上當然都是來自維基百科XDD

我自己覺得

就是把自己src裡的程式碼(es6, vue)，用它包一包弄成讓瀏覽器可以看懂(html, css, js)。

有兩個很重要的資料夾：src、dist

src：放置前端所撰寫的程式，es6、vue

dist：經過webpack的編譯，產生瀏覽器看的懂的檔案

備註：會用dist裡的檔案部署

安裝

在安裝webpack之前要先裝node.js

因為webpack需要在nodejs運行, 先裝好node.js, npm也會自動幫你裝好惹

其實它官網都有教學，按照步驟來就行了。

webpack 基本安裝

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev

發現會新增某些檔案

node_modules/ 只要是經由npm安裝的都會到這個資料夾

package.json 這個檔案很重要，若要搬移到別的地方，安裝這裡面的套件就對了，而且還只要下一行指令就好XD

package-lock.json 這個就是你package.json裡安裝東西的詳細資訊

新增一個webpack.config.js做為webpack設定檔

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

核心概念

entry：入口起點

output：打包後輸出的檔案

loader：讓webpack處理非javascript的文件，例如css

plugins：想要使用一個插件，你只需要 require() 它，然後把它添加到 plugins，

例如new HtmlWebpackPlugin({template: './src/index.html'})

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

那開始來trytry看吧!!!

1. 修改webpack.config.js檔案

我會把自己的程式放進src裡面，打包過後的放在dist資料夾裡面(部屬也是用這裡的檔案)

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
};

2. 建立src資料夾並新增一個app.js

內容先隨意填，console.log("hi");

3. 建立dist資料夾

4. 修改package.json檔案

在scripts的部分再加上 "build": "webpack"

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

5. 下指令npm run build

你就可以在dist資料夾裡找到你用webpack打包好的檔案 dist/app.js

好神奇阿阿阿(自己說)

那自己下課囉，有錯請告訴我捏QQ

2019/02/11(一)

webpack-dev-server

安裝webpack-dev-server

cd webpack-demo

npm install webpack-dev-server --save-dev

1. 先創一個index.html

我讓<title>為webpack-demo

2. 修改package.json檔案

在scripts的部分再加上 "dev": "webpack-dev-server --mode development"

原本直接"dev": "webpack-dev-server"出現錯誤

他有提示要用mode，而mode後面可接development或production

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

3. 下指令npm run dev

他會有提示client端輸入http://localhost:8080就看的到了唷

這是他的default網址，但也可以自己設定

修改webpack.config.js

增加devServer這個object

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    devServer:{ //for webpack-dev-server
        host:'localhost',
        port:5487,
        open:true, //自動打開頁面
        hot:true,
    }
};