React安装步骤
首先安装全局webpack
cnpm i webpack@3.8.1 -g
//或者 当具体的项目有规定webpack版本的时候安装哪个版本即可
npm i webpack@3.8.1 -g
安装开发依赖的webpack
cnpm i webpack@3.8.1 -D
npm i webpack@3.8.1 -D
安装async 如果项目中没有用到 则不用安装
cnpm i async -S
npm i async -S
没有对应的loader解析报错
You may need an appropriate loader to handle this file type.
安装loader模块
cnpm i node-sass sass-loader less less-loader -D
npm i node-sass sass-loader less less-loader -D
cnpm i css-loader style-loader -D
npm i css-loader style-loader -D
安装source-map 查看打包之前的文件
cnpm i source-map -D
npm i source-map -D
安装解析ES6
cnpm i babel-preset-env -D
npm i babel-preset-env -D
cnpm i babel-loader@7 babel-core@6 -D
npm i babel-loader@7 babel-core@6 -D
安装webpack的全局hot
cnpm i webpack-dev-server@2.9.3 -g
npm i webpack-dev-server@2.9.3 -g
安装webpack的开发依赖hot
cnpm i webpack-dev-server@2.9.3 -D
npm i webpack-dev-server@2.9.3 -D
调用热启动
webpack-dev-server --inline --hot
解决箭头函数等问题
cnpm i babel-preset-stage-0 -D
npm i babel-preset-stage-0 -D
//配置箭头函数需要在.babelrc里面配置"stage-0"
校验prpos
cnpm i prop-types -S
npm i prop-types -S
提供一下基本的pageage.json可根据自己项目需求添加
{
"name": "my-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.11.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.1",
"cssgrace": "^3.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file": "^0.2.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"open-browser-webpack-plugin": "^0.0.5",
"postcss-loader": "^3.0.0",
"postcss-px2rem-exclude": "^0.0.6",
"sass-loader": "^7.1.0",
"source-map": "^0.7.3",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"antd": "^3.16.5",
"antd-mobile": "^2.2.11",
"axios": "^0.18.0",
"jquery": "^3.4.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^4.3.1"
}
}
webpack.config.js配置
// webpack 配置文件
var path = require("path"); // 无需安装 Node 自带模块
var htmlWebpackPlugin = require("html-webpack-plugin"); // 操作 html
var openBrowserWebpackPlugin = require("open-browser-webpack-plugin"); // 自动打开 浏览器
var extractTextWebpack = require("extract-text-webpack-plugin"); // 抽离样式
var webpack = require("webpack");
console.log('webpack');
// 文件打包
// js 处理ES6 ES7 demo.jsx
// png jpg svg iocnfont
// less scss css
// app.vue 单文件组件
module.exports = {
entry:["./src/main.js"], // 入口
output:{
path:path.resolve(__dirname,"dist"), // resolve 成功的处理方式
filename:"js/[name].[hash:8].js", // md5 格式加密 得到 长度 8的 加密字段 阻止浏览器缓存
publicPath:"", // 公共路径 上线需要修改
},
devtool:"source-map", // 方便调试
module:{ // 对需要打包的模块进行配置
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:["babel-loader"]
},
{
test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
use:["url-loader?limit=8192&name=imgs/[hash:8].[name].[ext]"]
},
{
test:/\.(css|scss)/,
use:extractTextWebpack.extract({
fallback:"style-loader", // 样式 改造创建 node 风格 JS字符串
use:[
'css-loader', // 转换 commonJS 规范的模块
{
loader:"postcss-loader", // css代码结构转换
options:{
plugins:function(){
return [
require("cssgrace"), // css代码美化
require("autoprefixer"), // 自动补全
require("postcss-px2rem-exclude")(
{
remUnit:100, // 200px% 100 ==> 2rem
exclude:/antd-mobile/i, // 排除 antd-mobile不需要进行 rem 转换
}
)
]
}
}
},
"sass-loader"
]
})
},
{
test:/\.(css|less)/,
use:extractTextWebpack.extract({
fallback:"style-loader", // 样式 改造创建 node 风格 JS字符串
use:[
'css-loader', // 转换 commonJS 规范的模块
{
loader:"postcss-loader", // css代码结构转换
options:{
plugins:function(){
return [
require("cssgrace"), // css代码美化
require("autoprefixer"), // 自动补全
require("postcss-px2rem-exclude")(
{
remUnit:100, // 200px % 100 ==> 2rem
exclude:/antd-mobile/i, // 排除 antd-mobile不需要进行 rem 转换
}
)
]
}
}
},
"less-loader"
]
})
}
]
},
// 配置服务器
devServer:{
contentBase:path.join(__dirname,"dist"), // 插件起服务作用于 dist
compress:true,
hot:true,
inline:true,
// open:true,
host:"0.0.0.0",
port:8000,
publicPath:"",
proxy:{ // 代理
}
},
plugins:[ // 使用插件
new htmlWebpackPlugin({
template:"./public/index.html",
inject:true // 注入 自动引入 js 和 css
}),
new openBrowserWebpackPlugin({url:"http://localhost:8000"}),
new extractTextWebpack({
filename:"css/app.[hash:8].css",
allChunks:true, // 打包所有样式数据
disable:false // 样式抽离
}),
// 自动引入
new webpack.ProvidePlugin({
React:"React",
Component: ['react', 'Component'],
$:"jQuery"
})
]
}
.babelrc文件
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}