代码拉取完成，页面将自动刷新
npm install -y
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime -D
yarn add react react-dom
- src
|- index.js
- public
|- index.html
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
const devConfig = require("./webpack.config.dev.js");
const prodConfig = require("./webpack.config.prod.js");
module.exports = (env, argv) => {
console.log(env, argv);
if (argv.mode === "development") {
return merge(baseConfig, devConfig);
}
if (argv.mode === "production") {
return merge(baseConfig, prodConfig);
}
// Add production config here if needed
};
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new HtmlWebpackPlugin({
title: "My App",
template: "./src/index.html",
}),
],
resolve: {
// 配置别名
alias: {
"@": path.resolve(__dirname, "src"),
},
// 引入文件忽略文件扩展名
extensions: [".js", ".jsx", ".tsx", ".json"],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
},
{
test: /\.(jsx|tsx)?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react","@babel/preset-typescript"],
plugins: ["@babel/plugin-transform-runtime"],
},
},
},
// 配置 sass-loader 和 css-loader 和 style-loader
{
test: /\.(css|scss)$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
"sass-loader",
],
},
],
},
};
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
const path = require("path");
module.exports = {
mode: "development",
devtool: "inline-source-map",
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 9000,
open: true,
},
};
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.config.base.js");
module.exports = module.exports = {
mode: "production",
devtool: "source-map",
};
yarn add sass sass-loader style-loader css-loader -D
module: {
rules: [
// 配置 css-loader 和 style-loader
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
],
},
// 配置 sass-loader 和 css-loader 和 style-loader
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
"sass-loader",
],
},
]
在 src 文件夹中创建一个名为 index.js 的文件，并添加以下代码
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello, React!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
在 public 文件夹中创建一个名为 index.html 的文件，并添加以下代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
yarn add typescript @types/node @types/react @types/react-dom ts-loader @babel/preset-typescript -D
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
npx webpack serve --open
yarn add progress-bar-webpack-plugin -D
plugins: [
new ProgressBarWebpackPlugin(),
],
yarn add url-loader file-loader -D
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8KB的图片将会被转为base64
name: 'images/[name].[ext]', // 输出到指定的文件夹
},
},
],
},
],
},
yarn add mini-css-extract-plugin -D
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
},
},
"sass-loader",
],
},
],
}
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
// 其他插件...
],
output: {
filename: "js/[name].js",
path: path.resolve(__dirname, "dist"),
},
yarn add webpack-bundle-analyzer -D
plugins: [
new BundleAnalyzerPlugin(),
// 其他插件...
],
externals: {
// 模块名: 全局变量
"@antv/g2plot": "G2Plot",
},
把js css cdn链接放入 html-webpack-plugin
new HtmlWebpackPlugin({
title: "My App",
template: "./public/index.html",
// HtmlWebpackPlugin的其他配置项...
// 这里可以设置其他的HtmlWebpackPlugin配置项
cdn: cdn, // 将cdn数组作为HtmlWebpackPlugin的自定义配置项
}),
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 使用cdncss -->
<% htmlWebpackPlugin.options.cdn.css.forEach(v=> { %>
<link rel="<%= v.rel %>" href="<%= v.url %>">
</link>
<% }) %>
</head>
<body>
<div id="root"></div>
<!-- 使用cdn -->
<% htmlWebpackPlugin.options.cdn.js.forEach(v=> { %>
<% if(v.defer){ %>
<script type="text/javascript" defer src="<%= v.url %>"></script>
<% }else if(v.async){ %>
<script type="text/javascript" async src="<%= v.url %>"></script>
<% }else{ %>
<script type="text/javascript" src="<%= v.url %>"></script>
<% } %>
<% }) %>
</body>
</html>
yarn add -D tailwindcss postcss autoprefixer
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
module.exports = {
content: [
// Example content paths...
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}'
],
// purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.jsx'],
// darkMode: 'media ', // or 'media' or 'class'
important: true,
theme: {
extend: {}
},
variants: {
extend: {}
},
plugins: [],
corePlugins: {
preflight: false
}
};
@tailwind base;
@tailwind components;
@tailwind utilities;
class name 被 Module CSS 重新命令了，导致元素上的 class name 在style标中压根找不到对应的 css rules 那这应该就是问题的根源所在了。
基本清楚了问题点关键点在于编译后的 class name 被重新命名了，那就是模块化的问题。所以第一时间想到了 css-loader（因为它就是干这事儿的）
配置 css-loader 中的 modules
{
loader: 'css-loader',
// tailwindcss 要加以下代码
options: {
modules: {
mode: 'icss',
localIdentName: '[path][name]__[local]--[hash:5]'
}
}
},
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。