使用ts写一个贪吃蛇的项目
第一步:配置webpack和tsconfig,这里可以使用之前配置过的
第二步:在之前配置好的webpack中加入css打包时的配置模块
运行npm i -D less less-loader css-loader style-loader下载相关依赖并在module.rules属性中进行配
为了使CSS代码的兼容性更好还需要下载postcss
npm i - D postcss postcss-loader postcss-preset-env
配置postcss
//引入path模块,管理路径 // import { Configuration } from 'webpack';//运行webpack时注释掉 /** * @type {Configuration} */ const path = require('path'); //引入html-webpack-plugin const HTMLWEBPACKPLUGIN = require('html-webpack-plugin') const { CleanWebpackPlugin } = require("clean-webpack-plugin") //webpack中的所有配置信息都应写在module.exports中 module.exports = { //指定入口文件 entry: './src/index.ts', //指定打包文件所在目录 output: { //指定打包文件的目录 // path:'./dist' path: path.resolve(__dirname, 'dist'), //打包后文件的文件名 filename: "bundle.js", environment: { //配置打包的环境 arrowFunction: false//告诉webpack不使用箭头函数 } }, //指定webpack打包时要使用的模块 module: { //指定加载的规则 rules: [ { //指定规则生效的文件 test: /\.ts$/, //要使用的loader,执行顺序从后往前 use: [ {//配置babel //指定加载器 loader: "babel-loader", //设置babel options: { //设置预定义环境 presets: [ [ //指定环境插件 "@babel/preset-env", //配置信息 { //要兼容的目标浏览器 targets: { "chrome": "88", "ie": "11" }, "corejs": "3",//指定core.js的版本 // //使用core.js的方式 "useBuiltIns": "usage",//"usage"表示按需加载 }, ] ] } }, "ts-loader" ], //指定要排除的文件 exclude: /node_modules/, }, //设置less文件的处理 { test: /\.less$/, use: [ "style-loader", "css-loader", { loader:"postcss-loader", options:{ postcssOptions:{ plugins:[ [ "postcss-preset-env", { browsers:'last 2 versions' } ] ] } } }, "less-loader" ] } ] }, //配置webpack的插件 plugins: [ new CleanWebpackPlugin(), new HTMLWEBPACKPLUGIN({ // title:'这是一个自定义的title'//用来配置自动生成的html文件的title template: "./src/index.html"//用来配置自动生成的html文件的模板 }) ], mode: 'development', resolve: { //设置引用模块 extensions: ['.ts', '.js']//告诉webpack哪些后缀的文件可以被当做模块引用 } }
标签:配置,项目,ts17,指定,loader,webpack,贪吃蛇,path,postcss From: https://www.cnblogs.com/SadicZhou/p/17063857.html