文章目录
webpack + react
安装react插件
npm install -s react react-dom react-router redux
安装各种编译用插件
# @babel/core —— babel核心库
# @babel/preset-env @babel/plugin-transform-runtime —— 将es6,es7语法转换成es5
# @babel/preset-react —— 将react语法转换为 es5
# @babel/runtime —— 模拟一个ES2015的环境，只在引入模块中起作用
npm install -d @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime
# babel-loader —— 使用babel编译项目
# css-loader —— 编译css文件
# style-loader —— 编译css文件
# url-loader —— 引入路径（图片，字体）
# file-loader —— 引入文件（图片，字体）
# less —— 识别less文件
# less-loader —— 编译less文件
npm install -s babel-loader css-loader file-loader less less-loader style-loader url-loader
添加打包构建规则
// 在配置文件的module下添加rules属性
rules:[
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: 'babel-loader',//loader的名称（必须）
},
{
test: /\.css$/,
use:[
{ loader: 'style-loader' }, // 创建 <style></style>,
{ loader: 'css-loader' }, // 转换css
]
},
{
test: /\.less$/,
use: [
{loader: 'style-loader', },
{loader: 'css-loader',},
{loader: 'less-loader'}, // 编译 Less -> CSS
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
/* url-loader 包含file-loader，这里不用file-loader,
小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入 */
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入
name: 'static/fonts/[name].[hash:7].[ext]'
}
}
]
编写页面文件测试
// index.js
import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component {
render() {
return (
<div style={{ color: "#333" }} className="test test2">
<input />
</div>
)
}
}
ReactDom.render(<App />, document.getElementById('app'))
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react demo</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>