มาเขียน SCSS ด้วย Webpack กันเถอะ
สวัสดีครับ กลับมาพบกันอีกแล้วนะครับ พอดีช่วงนี้มีคนถามเรื่อง scss เข้ามาพร้อมๆกันหลายคนพอสมควรเลยครับ ถ้าใครยังไม่รู้จัก scss คืออะไรตามไปอ่านได้จากนี้เลยครับ
ถ้าให้พูดง่ายๆคือมันเป็นเครื่องมือที่ช่วยให้เราสามารถเขียน css ได้อย่างมีประสิทธิภาพยิ่งขึ้นครับ ส่วนรายละเอียดใน official website มีสอนหมดแล้วครับ ไว้รอบหน้าถ้าใครสนใจเป็นพิเศษผมจะเขียนบลอคแยกให้นะครับแต่วันนี้ผมขอ Focus ที่เจ้าตัว webpack ก่อนแล้วกันนะครับ
บางคนที่ศึกษาการใช้ Webpack ใหม่ๆอาจจะเจอปัญหาว่า Doc ที่อยู่ใน Official websit นั้นอ่านยากเข้าใจยาก ทำให้หลายๆคนอาจจะท้อใจและยอมแพ้ไปครับวันนี้ผมเลยมาเขียนเล่าวิธีการใช้ Webpack กับ SCSS ให้ฟังกันครับ ขอบอกไว้ตรงนี้ก่อนนะครับว่าการใช้ SCSS มีหลายกระบวนท่ามากๆนะครับการใช้ Webpack ก็เป็นแค่กระบวนท่านึงในหลายๆกระบวนท่าที่ทำได้ และผมก็ไม่ได้ recommend นะครับว่ากระบวนท่าที่ผมนำมาเล่าให้ฟังในวันนี้จะเป็นท่าที่ดีที่สุด จริงๆอาจจะเป็นแค่เพียงคู่มือเริ่มต้นแบบง่ายๆให้หลายๆท่านก็ยังงงกับเจ้า Webpack เข้าใจมันมากขึ้นแค่นั้นครับ
เกริ่นมามากแล้ว มาเริ่มกันเลยครับ
ขั้นแรกผมจะสร้าง directory ใหม่ขึ้นมาครับ
mkdir wp_exampleหลังจากนั้นก็เข้าไปที่ directory ที่เราสร้างขึ้นครับและสร้าง Dependency fileให้โปรเจคและเจ้าตัว Webpack ด้วยครับ
npm init npm install — save-dev webpack
หลังจากนั้นก็รอให้เจ้า npm มันติดตั้ง package จนเสร็จนะครับ ทีนี้เราก็จะมาลองเล่นเจ้า Webpack เบื้องต้นกันครับ ย้ำนะครับว่าถ้าใครอยากดู config scss อย่างเดียวให้ข้ามตรงนี้ไปได้เลยครับ
ทีนี้เราจะมาสร้างไฟล์ config ให้เจ้า webpack กันโดยสร้างไฟล์ชื่อ webpack.config.js เลยครับหลังจากนั้นก็ใส่โค้ดตามนี้เลยครับ
module.exports = {
entry: { helloWorld: ‘./js/helloworld’ },
output: { filename: ‘public/bundle.js’ }
};Entry คือ จุดเริ่มต้นของไฟล์ที่จะให้ Webpack มันเริ่ม compile หรือ bundle ครับ
Output คือ ตัวแหน่งของไฟล์ที่ต้องการให้ webpack มันเขียนไฟล์ที่ bundle เรียบร้อยลงไปครับ
จากตัวอย่างเราก็จะสร้าง directory js ขึ้นมาใหม่ครับและสร้างไฟล์ helloworld.js ใน directory นี้ครับโดยใส่โค้ดง่ายๆตามนี้เลยครับ
console.log(‘Hello World’);Ok ครับหลังจากนั้นก็รันคำสั่งเพื่อ Bundle ไฟล์กันเลยครับ
webpackหลังจากรันคำสั่งแล้วจะได้ผลลัพธ์แบบนี้ครับ
ทีนี้ถ้าเราสังเกตดีๆในไฟล์โปรเจคเราจะมีไฟล์ public/bundle.js สร้างขึ้นมาใหม่ครับซึ่งนี้ก็คือไฟล์ที่ bundle เรียบร้อยแล้วครับทีนี้เรามาลองรันไฟล์นี้ดูครับ
node public/bundle.jsเราก็จะเห็น console โผล่คำว่า ‘hello world’ ขึ้นมาครับยินดีด้วยครับคุณ bundle ไฟล์สำเร็จแล้ว
ทีนี้เราจะสร้างไฟล์ index.html ขึ้นมาครับใส่ html ตามนี้เลยครับ
<!DOCTYPE html>
<html>
<head>
<title>Supplier</title>
</head>
<body>
<script ./public/bundle.js"></script>
</body>
</html>Save ไฟล์แล้วลองลากไฟล์ลงบน Browser เลยครับ
ลองสังเกตุที่ console ดูนะครับจะเห็น ‘hello world’ โผล่มาแล้ว
โอเคครับทีนี้ผมจะสร้าง directory scss ใหม่ในโปรเจคนะครับ แล้วก็สร้าง style.scss ขึ้นมาใส่ scss code ตามนี้เลยครับ
$primary-color: #333;body{
background:$primary-color;
}
ตอนนี้เราสร้างไฟล์ scss เสร็จเรียบร้อยแล้วครับแต่เรายังเอามันไปใช้ไม่ได้เพราะ brownser นั้นเข้าใจแต่ css ครับเพราะฉะนั้นเราจำเป็นที่จะต้องแปลงเจ้า scss เป็น css ซะก่อนทีนี้เราก็จะใช้เครื่องมือที่เป็น plugin เสริมของ webpack กันครับให้ติดตั้งตามนี้เลยครับ
npm install sass-loader node-sass --save-devหลังจากติดตั้งเสร็จผมก็จะเข้าไปแก้ไฟล์ config ของ webpack ให้เป็นแบบนี้ครับ
module.exports = {
entry: { helloWorld: ‘./js/helloworld’ },
output: { filename: ‘public/bundle.js’ },
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: “style-loader” // creates style nodes from JS strings
},{
loader: “css-loader” // translates CSS into CommonJS
},{
loader: “sass-loader” // compiles Sass to CSS
}]
}]
}
};เราจะใช้ตัวช่วยคือเหล่า loader ทั้งหลาย ผมขออธิบายก่อนนะครับว่า loader คือตัวโหลดและคอมไพล์ไฟล์ชนิดอื่นๆที่ไม่ใช่ js ครับซึ่งในบลอคนี้ผมใช้ loader 3 ตัว คือ style-loader, css-loader, sass-loader ซึ่ง loader อันไหนทำอะไรสามารถอ่านได้จาก comment ใน code ได้เลยครับส่วน test เป็นการเขียน regex เพื่อให้ detect ไฟล์นามสกุลในลักษณะที่เราต้องการได้ครับอย่างเช่นตัวอย่างคือไฟล์ที่มีนามสกุล .scss ครับ
หลังจากนั้นผมจะเข้าไปแก้ไขไฟล์ helloworld.js ใหม่โดย require ไฟล์ .scss เข้าไปด้วยครับ
console.log(‘hello world’);
require(‘./../scss/style.scss’);หลังจากนั้นก็สั่ง webpack bundle file ครับ
webpackจะเจอ error แบบนี้ครับฮ่าๆๆๆ
ไม่ต้องตกใจนะครับที่ขึ้นแบบนี้เพราะว่าผมลืมติดตั้ง style-loader ครับซึ่งผมก็จะติดตั้งมันเข้าไปครับ
npm install --save-dev style-loaderผมจะเจออีก 1 error ครับ
คงไม่ต้องบอกนะครับว่าเกิดเพราะอะไรติดตั้งมันเข้าไปเลยครับ
npm install --save-dev css-loaderทีนี้เราลอง bundle ไฟล์ใหม่ดูครับ
bundleจะได้ผลลัพธ์แบบนี้ครับ
เย้ เสร็จเรียบร้อยครับทีนี้เราก็ลองไปกด refresh บน brownser ดูกันครับ
เพียงเท่านี้ scss ที่เราเขียนไว้ก็สามารถทำงานได้แล้วหล่ะครับแต่เดี๋ยวก่อนนนน ถ้า view source page นี้ดีๆท่านจะเห็นว่าไฟล์ html ไม่ได้เรียกไฟล์ css เข้ามาเลยแล้ว Style มาได้ยังไง ?
เฉลยครับ เป็นเพราะมัน bundle style อัดมาในไฟล์ bundle.js เลยครับซึ่งท่านี้มันอาจจะสะดวกตอน Development นะครับแต่ไม่ดีอย่างแรงถ้าเราจะใช้ท่านี้กับการ Deploy บน Production จริง ซึ่งผมมีทางออกให้ครับตัวช่วยของเราในเรื่องนี้คือเจ้า
Extract Text Plugin นั่นเองครับถ้าพูดง่ายๆมันสามารถช่วยให้ Webpack save ไฟล์ css แยกออกมาจาก js ได้นั่นเอง ทีนี้เราก็มาติดตั้งมันกันเลยครับ
npm install --save-dev extract-text-webpack-pluginทีนี้ให้แก้ config webpack file ดังนี้ครับ
const ExtractTextPlugin = require(“extract-text-webpack-plugin”);const extractSass = new ExtractTextPlugin({
filename: “./css/main.css”
});module.exports = {
entry: { helloWorld: ‘./js/helloworld’ },
output: { filename: ‘public/bundle.js’ },
module: {
rules: [{
test: /\.scss$/,
loader: extractSass.extract({
loader: [{
loader: “css-loader”
}, {
loader: “sass-loader”
}],
fallbackLoader: “style-loader”
})
}]
},
plugins: [
extractSass
]
};
ทีนี้เลย bundle ไฟล์ดูครับ
เรียบร้อยครับในกรณีที่ใคร bundle แล้วมีปัญหาในขั้นตอนนี้ลอง install extract-text-webpack-plugin@^.0.0-beta แทนนะครับแล้วจะ bundle ผ่าน
ยอดเยี่ยมเลยครับทีนี้เราก็จะได้ไฟล์ .css ที่ compile มาจาก scss ที่เราต้องการเรียบร้อยแล้วครับซึ่งถ้าย้อนกลับไปอ่านในไฟล์ config ที่แก้ไปผมมั่นใจว่าทุกคนจะเข้าใจมันได้ไม่ยากเลยครับเพราะเห็นผลลัพธ์แล้ว ทีนี้เราจะมาเช็คความเรียบร้อยโดยการเปิดไฟล์ .css ดูกันซึ่งจะได้ออกมาแบบนี้
เสร็จสิ้นแล้วครับทีนี้เราก็สามารถเขียน scss แล้วนำไปแปลงเป็น .css โดยใช้ Webpack ได้แล้วครับซึ่งก็มีทั้งสองกระบวนท่าที่แนะนำไปในวันนี้ลองเอาไปปรับใช้กันดูนะครับ
สุดท้ายนี้ผมอยากจะบอกทุกคนท่านว่าคุณไม่จำเป็นต้องใช้ Webpack ก็ได้นะครับเพราะไม่มีใครการันตีได้ว่าอะไรดีที่สุดทั้งนี้ทั้งนั้นคุณต้องประเมินตัวคุณเองปละงานที่อยู่ในมือเวลาที่มีและอีกหลายๆอย่าง ซึ่งจะทำให้คุณเลือกเครื่องมือในการทำงานได้อย่างมีประสิทธิภาพมากยิ่งขึ้นครับ ซึ่งผมขอทิ้งท้ายไว้ว่า Webpack ยังทำอะได้อีกมากเลยครับไว้ผมจะมาเขียนเล่าเรื่องให้ฟังใหม่นะครับ ผมหวังเป็นอย่างยิ่งว่าสิ่งที่ผมได้มาบอกเล่าให้ทุกคนฟังในวันนี้จะมีประโยชน์กับท่านผู้อ่านทุกท่านไม่มากก็น้อย ส่วนวันนี้ผมขอตัวก่อน เจอกันใหม่ครั้งหน้าครับ ถ้าเห็นว่าบทความนี้มีประโยชน์ก็ฝาก Like และ Share กันด้วยนะครับ
