webpack配置打包ts+scss

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、最后附上当前教程的文档结构