react做h5 例子_从零搭建 React 开发 H5 模板

项目创建

创建项目文件夹

mkdir react-demo

cd react-demo

npm init -y

依赖安装

yarn add react react-dom

yarn add webpack webpack-cli webpack-dev-server webpack-merge

babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react

babel-preset-stage-0 cross-env

file-loader jsx-loader

css-loader style-loader url-loader less less-loader --dev

webpack 配置

区分开发环境 development 和生产环境 production 配置

分别创建对应的配置文件

antd-mobile 按需加载

安装插件

yarn add babel-plugin-import -D

修改 babel.config.js 配置

module.exports = {

presets: ["@babel/preset-env", "@babel/preset-react"],

plugins: [

"@babel/plugin-transform-runtime",

"@babel/plugin-proposal-class-properties",

["import", { libraryName: "antd-mobile", style: true }]

]

};

externals 配置

webpack 中的 externals 防止将某些 import 的包(package)打包到 bundle 中

modules.export = {

plugins: [

new HtmlWebpackPlugin({

title: 'React Board',

files: { // 配置 CDN 引入

js: [

'//unpkg.com/swiper/js/swiper.min.js'

],

css: [

'//unpkg.com/swiper/css/swiper.min.css'

]

}

})

],

externals: {

swiper: 'Swiper'

}

}

index.html 设置：

代码中使用：

import Swiper from 'swiper';

移动端适配

使用 postcss-loader实现 css 转换

// 项目使用的是 less

yarn add postcss-less-loader -D

webpack.base.js 配置

{

test: /\.(css|less)$/,

use: [

'style-loader',

'css-loader',

'less-loader',

'postcss-less-loader'

]

}

有两种转换方案：

postcss-px-to-viewport<