调整项目结构及增加CSS单独打包
This commit is contained in:
parent
6d44a40a65
commit
7919b5d7f7
@ -34,6 +34,7 @@ Less & CSS资源：
|
||||
- postcss；
|
||||
- postcss-loader；
|
||||
- postcss-preset-env；
|
||||
- mini-css-extract-plugin；
|
||||
|
||||
### **项目使用**
|
||||
|
||||
|
||||
21
babel.config.js
Normal file
21
babel.config.js
Normal file
@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
// 设置预定义环境
|
||||
presets: [
|
||||
[
|
||||
// 指定环境的插件
|
||||
"@babel/preset-env",
|
||||
// 配置信息
|
||||
{
|
||||
// 要兼容的目标浏览器
|
||||
targets: {
|
||||
"chrome": "100",
|
||||
"ie": "11"
|
||||
},
|
||||
// 指定corejs的版本
|
||||
"corejs": "3",
|
||||
// 使用corejs的方式：usage表示按需加载
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
]
|
||||
};
|
||||
95
config/webpack.dev.js
Normal file
95
config/webpack.dev.js
Normal file
@ -0,0 +1,95 @@
|
||||
// 引入一个包
|
||||
const path = require("path");
|
||||
// 引入HTML插件
|
||||
const HTMLWebpackPlugin = require("html-webpack-plugin");
|
||||
// 引入EsLint插件
|
||||
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
|
||||
|
||||
// webpack中的所有配置信息
|
||||
module.exports = {
|
||||
// 模式：development开发、production生产
|
||||
mode: "development",
|
||||
// 指定入口文件
|
||||
entry: "./src/main.ts",
|
||||
|
||||
// 指定打包文件所在目录
|
||||
output: {
|
||||
// 指定打包文件的目录
|
||||
path: undefined,
|
||||
// 打包后的文件名
|
||||
filename: "bundle.js",
|
||||
|
||||
// 不使用箭头函数的方式定义
|
||||
environment: {
|
||||
arrowFunction: false,
|
||||
const: false
|
||||
}
|
||||
},
|
||||
|
||||
// 指定webpack打包时要使用的模块
|
||||
module: {
|
||||
// 指定要加载的规则
|
||||
rules: [
|
||||
{
|
||||
// 指定规则生效的文件
|
||||
test: /\.ts$/,
|
||||
// 要使用的loader
|
||||
use: [
|
||||
"babel-loader",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// 配置webpack插件
|
||||
plugins: [
|
||||
new HTMLWebpackPlugin({
|
||||
template: "./public/index.html"
|
||||
}),
|
||||
new ESLintWebpackPlugin({
|
||||
// 指定检查文件的根目录
|
||||
context: path.resolve(__dirname, "../src"),
|
||||
})
|
||||
],
|
||||
|
||||
// 设置引用模块
|
||||
resolve: {
|
||||
extensions: [".ts", ".js"]
|
||||
},
|
||||
|
||||
// 开发服务器
|
||||
devServer: {
|
||||
host: "localhost", // 启动服务器域名
|
||||
port: "8099", // 启动服务器端口号
|
||||
open: true, // 是否自动打开浏览器
|
||||
}
|
||||
};
|
||||
@ -4,9 +4,12 @@ const path = require("path");
|
||||
const HTMLWebpackPlugin = require("html-webpack-plugin");
|
||||
// 引入EsLint插件
|
||||
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
|
||||
// 引入CSS单独打包插件
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
// webpack中的所有配置信息
|
||||
module.exports = {
|
||||
// 模式：development开发、production生产
|
||||
mode: "production",
|
||||
// 指定入口文件
|
||||
entry: "./src/main.ts",
|
||||
@ -14,9 +17,9 @@ module.exports = {
|
||||
// 指定打包文件所在目录
|
||||
output: {
|
||||
// 指定打包文件的目录
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
path: path.resolve(__dirname, "../dist"),
|
||||
// 打包后的文件名
|
||||
filename: "bundle.js",
|
||||
filename: "static/js/bundle.js",
|
||||
// 自动清空上一次打包的内容，webpack4需使用扩展包clean-webpack-plugin插件来进行自动清空操作
|
||||
clean: true,
|
||||
|
||||
@ -36,33 +39,7 @@ module.exports = {
|
||||
test: /\.ts$/,
|
||||
// 要使用的loader
|
||||
use: [
|
||||
// 配置babel
|
||||
{
|
||||
// 指定加载器
|
||||
loader: "babel-loader",
|
||||
// 设置babel
|
||||
options: {
|
||||
// 设置预定义环境
|
||||
presets: [
|
||||
[
|
||||
// 指定环境的插件
|
||||
"@babel/preset-env",
|
||||
// 配置信息
|
||||
{
|
||||
// 要兼容的目标浏览器
|
||||
targets: {
|
||||
"chrome": "100",
|
||||
"ie": "11"
|
||||
},
|
||||
// 指定corejs的版本
|
||||
"corejs": "3",
|
||||
// 使用corejs的方式：usage表示按需加载
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
"babel-loader",
|
||||
"ts-loader"
|
||||
],
|
||||
// 要排除的文件
|
||||
@ -73,7 +50,7 @@ module.exports = {
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
"style-loader",
|
||||
MiniCssExtractPlugin.loader,
|
||||
"css-loader",
|
||||
// 引入postcss
|
||||
{
|
||||
@ -104,7 +81,12 @@ module.exports = {
|
||||
}),
|
||||
new ESLintWebpackPlugin({
|
||||
// 指定检查文件的根目录
|
||||
context: path.resolve(__dirname, "src"),
|
||||
context: path.resolve(__dirname, "../src"),
|
||||
}),
|
||||
// 提取css成单独文件
|
||||
new MiniCssExtractPlugin({
|
||||
// 定义输出文件名和目录
|
||||
filename: "static/css/main.css",
|
||||
})
|
||||
],
|
||||
|
||||
@ -4,10 +4,9 @@
|
||||
"description": "使用TypeScript + Webpack + Less实现贪吃蛇的例子",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack --mode development --config webpack.config.js",
|
||||
"publish": "webpack --mode production --config webpack.config.js",
|
||||
"start": "webpack serve --open chrome.exe"
|
||||
"dev": "webpack serve --config ./config/webpack.dev.js",
|
||||
"build": "webpack --config ./config/webpack.prod.js",
|
||||
"start": "npm run dev"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
@ -24,6 +23,7 @@
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"less": "^4.1.2",
|
||||
"less-loader": "^11.0.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"postcss-preset-env": "^7.7.1",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// 引入样式
|
||||
import "./style/index.less";
|
||||
import "./style/main.less";
|
||||
import GameController from "./modules/GameController";
|
||||
|
||||
const game = new GameController();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user