技術標籤：typescriptsass/less

1、首先新建一個專案資料夾，我這裡是tanchishe(貪吃蛇)，注意不能是中文

2、在終端中進入這個資料夾的路徑，生成package.json檔案，並加入以下命令(後續打包可直接輸入cnpm run build)

npm init -y

"build":"webpack"

3、生成tsconfig.json檔案，後續此檔案根據個人情況按需配置

tsc --init

4、安裝webpack、ts及scss的所需資源包

cnpm install webpack webpack-cli typescript ts-loader node-sass sass-loader css-loader style-loader -D
 

5、安裝自動生成html資源包

cnpm i -D html-webpack-plugin

6、專案根目錄下新建webpack.config.js檔案，並寫入以下配置

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.ts',//資源入口檔案
    output: {
        path:path.resolve(__dirname,'dist'),//打包位置
        filename: 'index.js'//打包後的檔名稱
    },
    module: {
        rules: [{
            test: /\.ts$/,
            use: 'ts-loader'
        },{
            test: /\.scss$/,
            use: [{//越靠近底部越先執行
                loader: 'style-loader' //將JS字串生成style節點
            },{
                loader: 'css-loader' //將Css轉換為CommonJs模組
            },{
                loader: 'sass-loader' //將Sass編譯成Css
            }]
        }]
    },
    plugins:[
        new HTMLWebpackPlugin({
            title:'貪吃蛇'//自定義標題位置
        })
    ],
    resolve:{
        extensions:['.ts','.js','.scss']
    }
}
 

7、最後附上當前教程的文件結構