贪吃蛇项目

• 项目搭建
• • less loader
  • postcss(css转换器)

项目搭建

主体搭建参考使用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()]
}