遇見零壹魔王

首先要先去下載並安裝Node.Js

https://nodejs.org/en/

安裝LTS的版本

然後裝好之後檢查一下有沒有裝好

開啟終端機(命令提示字元或PowerShell...等)

node -v

檢查版號有顯示版號就是大致上就沒問題了

大概會像這樣

接著打開你的MVC專案資料夾
 一般大概都長這樣

1. 終端機目錄移到專案資料夾

範例

cd D:\TestArea\tryWebpack\tryWebpack

(依照自己的專案路徑修改)

 

2.初始化創建package.json 在終端機輸入指令

npm init

然後會看到這個畫面

在專案的資料夾內會多出一支檔案package.json

3.在專案中安裝webpack，一樣在在終端機下指令

npm install webpack webpack-cli --save-dev

然後大概等個30秒-3分鐘後就會看到這個跑完的畫面

這時候去看專案資料夾就會再多2隻檔案

4. 安裝Sass編譯工具

npm i -D node-sass sass-loader css-loader mini-css-extract-plugin

等個10-30秒跑完後會看到這個畫面

5. 在專案中新增檔案 webpack.config.js

 

6. 在Script資料夾下隨意新增一隻任意名稱的js檔當作進入點

例如 tryWebPack.js

7. 在webpack.config.js填入屬性設定的程式

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    //進入點 ，會根據entry指定的檔案內容去編譯、minify或bundle
    entry: {
        index: './Scripts/tryWebPack.js', 
    },
    //JS檔產出設定- filename:產出的檔名 | path:產出的路徑
    output: {
        filename: 'myTest.bundle.js',
        path: path.resolve(__dirname, './Scripts'),
    },
    module: {
        rules: [
            {
                test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",//後處裡css minify (順序2)
                    "sass-loader" //先處理sass 編譯 (順序1)
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // 指定CSS輸出位置
            filename: "../Content/bundle.css"
        })
    ]
};

參考畫面

8. 編輯進入點的js檔tryWebPack.js

import '../Script/test'; // 加入js檔不用加副檔名喔
import '../SCSS/main.scss'; // 加入scss檔

//隨意加入一段JS語法測試看看
alert("hello");

在專案中加入一個測試的js檔test.js 跟測試的scss檔main.scss

test.js的內容

main.scss的內容

tryWebPack.js的參考畫面

9. 在package.json檔案的Scripts底下加上

"build": "webpack",
"watch": "webpack --watch"

10. ​在終端機下指令執行編譯

npm run build

會看到這個畫面
接著會到資料夾會發現產出了2隻檔案

是根據webpack.config.js中的設定產出的

檢視myTest.bundle.js的內容已經把tryWebPack.js跟test.js併近來，而且變成minify的檔案

相同的如果檢視bundle.css也會看到main.scss編譯過的內容

Advanced 1. 每次要編譯都要下 npm run build 有點麻煩

可以改用

npm run watch

這樣一來每次按儲存的時候就會自動編譯一次

Advanced 2. 我的檔案不想全部打包在同一隻，想根據需求拆成多隻

tryWebPack_H.js的內容

import '../Scripts/test'; // 加入js檔不用加副檔名喔
import '../SCSS/main.scss'; // 加入scss檔

//隨意加入一段JS語法測試看看
alert("hello");

tryWebPack_A.js的內容

import './testTwo'; // 加入js檔不用加副檔名喔
import './testThree'; // 加入js檔不用加副檔名喔
import '../SCSS/about.scss'; // 加入scss檔

打包的結果

 

 

參考資料
https://blog.johnwu.cc/article/webpack-4-sass-to-css.html