Typescript学习04：贪吃蛇项目

项目搭建

主体搭建参考使用bable打包TS代码
还需要加less的loader和转换器

less loader

添加依赖
npm i less less-loader css-loader style-loader

• webpack.config.ts的处理

//设置less文件的处理
{
test: /.less$/,
use: [
“style-loader”,
“css-loader”,
“less-loader”,
]
}

//引入一个包
const path=require('path');
//引入htMl插件
const htmlWebpackPlugin=require('html-webpack-plugin');

const {CleanWebpackPlugin}=require('clean-webpack-plugin');

//webpack中所有的配置信息都应该写在module.exports中
module.exports={
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            //设置ts的处理
            {
                //test指定的是规则生成的文件
                test: /\.ts$/,
                use: 'ts-loader',
                //要排除的文件夹
                exclude: /node-modules/
            },
             //设置less文件的处理
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ]
            }
        ]
    },

    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },

    plugins: [
        new htmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
}

postcss(css转换器)

类似js的babel,可以适配不同版本的css

• 依赖
  npm i postcss postcss-loader postcss-preset-env

{
loader: “postcss-loader”,
options: {
postcssOptions:{
plugins: [
[
‘postcss-preset-env’,
{
browsers: ‘last 2 versions’
}
]
]
}
}
},

//引入一个包
const path=require('path');
//引入htMl插件
const htmlWebpackPlugin=require('html-webpack-plugin');

const {CleanWebpackPlugin}=require('clean-webpack-plugin');

//webpack中所有的配置信息都应该写在module.exports中
module.exports={
    //指定入口文件
    entry: {
        app: './src/index.ts'
    },
    //指定打包文件所在目录
    output: {
        //指定打包文件的目录
        path: path.resolve(__dirname,'dist'),
        //打包后文件的名字
        filename: "bundle.js"
    },
    //指定webpack打包要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            //设置ts的处理
            {
                //test指定的是规则生成的文件
                test: /\.ts$/,
                use: 'ts-loader',
                //要排除的文件夹
                exclude: /node-modules/
            },
             //设置less文件的处理
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    //引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions:{
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                        {
                                            browsers: 'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader",
                ]
            }
        ]
    },

    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },

    plugins: [
        new htmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
}