mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom
example # 项目目录
├── public # 静态公用目录
│ └── index.html # html模板
├── src # 源代码目录
│ ├── pages # 页面目录
│ │ └── home # 主页目录
│ │ └── index.js # 主页代码
│ └── index.js # React 入口代码
└── package.json
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
<meta name="theme-color" content="#000000" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<div id="root">div>
body>
html>
import React from 'react'; //引入 react
function Home() {
return (<div>Hello, World!</div>)
}
export default Home;
'use strict';
import React from 'react'; //引入 react
import { createRoot } from 'react-dom/client';
import Home from '../src/pages/home'; //引入本项目的首页
//把首页渲染到 html 模版的 react 根节点上
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<Home />);
# 设置npm淘宝镜像
npm config set registry https://registry.npmmirror.com/
# 安装 React主程序 dom操作 路由
npm i -S react react-dom react-router-dom
# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react
# 安装 webpack主程序 支持命令行 本地开发用web服务 处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
# 安装 babel加载器 css加载器 style加载器 将CSS提取到单独的文件中
npm i -D babel-loader css-loader style-loader mini-css-extract-plugin
example # 项目目录
├── public # 静态公用目录
│ └── index.html # html模板
├── src # 源代码目录
│ ├── pages # 页面目录
│ │ └── home # 主页目录
│ │ └── index.js # 主页代码
│ └── index.js # React 入口代码
├── .babelrc # babel配置文件 新增
├── webpack # webpack配置目录 新增
│ └── dev.js # 开发环境配置文件 新增
└── package.json
{
"plugins": ["@babel/syntax-dynamic-import"],
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/preset-react"
]
}
// 引用库
const path = require('path');
const webpack = require('webpack');
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 路径方法
const resolve = pathname => path.resolve(__dirname, `../${pathname}`);
const stylesHandler = MiniCssExtractPlugin.loader;
module.exports = {
mode: 'development',
entry: resolve('src/index.js'),
output: {
clean: true,
filename: 'js/[name].bundle.js', //出口文件
path: resolve('dist') //输出路径
},
devServer: {
hot:true, // 热更新
open: true, // 编译结束后用浏览器打开
host: 'localhost', // 'local-ip',
},
plugins: [
new HtmlWebpackPlugin({
title: 'HTML页面标题', //替换index.html的title标签内容
template: resolve('public/index.html'), //html模版的位置
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[id].css',
ignoreOrder: false
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: [stylesHandler, 'css-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
],
},
};
注意：loader 的加载顺序是从右往左，从下往上
{
"scripts": {
"dev": "webpack serve -c webpack/dev.js",
"build:dev": "webpack -c webpack/dev.js"
}
}
npm run dev # 调试项目
npm run build:dev # 构建项目
# 安装 less组件 less加载器
npm i -D less less-loader
# 安装 sass/scss组件 sass/sass加载器
npm i -D sass sass-loader
# 安装 stylus组件 stylus加载器
npm i -D stylus stylus-loader
修改 src/pages/home/index.js
import React from 'react'; //引入 react
import './index.css'; // .colorRed { color: red; } .colorBlue { color: blue; }
import './index.less'; // .helloLess { color: green; }
import './index.scss'; // .helloSass { color: yellowgreen; }
import './index.styl'; // .colorStylus { color: aqua; }
function Home() {
return (<div>
<div className='colorRed'>Hello, World!</div>
<div className={'colorBlue'}>Hello, css!</div>
<div className={'helloLess'}>Hello, Less!</div>
<div className={'helloSass'}>Hello, Sass!</div>
<div className={'colorStylus'}>Hello, Stylus!</div>
</div>);
}
export default Home;
修改 webpack/dev.js，在 module -> rules 中添加
// less
{
test: /\.less$/i,
use: [stylesHandler, 'css-loader', 'less-loader'],
},
// sass / scss
{
test: /\.scss$/i,
use: [stylesHandler, 'css-loader', 'sass-loader'],
},
// stylus
{
test: /\.styl$/i,
use: [stylesHandler, 'css-loader', 'stylus-loader'],
},
返回目录
安装
npm i -D postcss-loader precss cssnano postcss-import postcss-calc postcss-scss
npm i -D postcss-normalize normalize.css
新建 postcss.config.js
module.exports = ({ file, options, env }) => ({
parser: require('postcss-scss'),
plugins: [
require('postcss-import'),
require('postcss-normalize')({
forceImport: true, //强制插入
browsers: 'last 2 versions' //浏览器近2个版本
}),
require('precss'), //支持“现代css”(Sass,Scss)语法，并转成 css
require('postcss-calc'), //编译前计算
// require('postcss-plugin-px2rem')({ rootValue: 100, minPixelValue: 2 }), //px 转 rem
require('cssnano')({preset: ['default', { discardComments: { removeAll: true } }]}) //压缩css，去除所有注释
]
});