webpack4搭建react环境（单页面路由）记录
一、新建文件夹 初始化项目 创建package.json文件
npm init -y二、安装webpack，webpack4 后需要安装webpack-cli 会生成package-lock.json文件和node_modules文件夹
npm i webpack --save-dev
npm i webpack-cli --save-dev
安装完成后打开package.json文件添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
现在package.json文件
{
"name": "oa_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5"
}
}
三、在根目录添加文件夹（src）文件夹中添加文件 index.js 内容随意
//index.js
console.log('hello world')
npm run build
//然后 就可以看到在根目录多出一个dist文件里面包含一个main.js
四、开发模式和生产模式（包含ES6 babel加载器）
//安装babel加载器
npm i @babel/core babel-loader @babel/preset-env --save-dev
//安装完成后打开package.json文件添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
},
//然后执行
npm run build
//这样基本就ok了五、安装react
//安装react
npm i react react-dom --save-dev
//安装react里的babel转化模块
npm i @babel/preset-react --save-dev
//根目录新建.babelrc 内容如下
{
"presets": ["@babel/env", "@babel/react"]
}
//根目录新建webpack.config.js 内容如下
const path = require('path');
module.exports = {
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
}
};
六、创建react内容
//将src下的index.js内容更改为
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
hello world
)
}
}
ReactDOM.render(七、css（scss）和html
//安装如下
npm i mini-css-extract-plugin css-loader --save-dev
npm i html-webpack-plugin html-loader --save-dev
cnpm install --save-dev node-sass sass-loader //安装scss 不需要可不装
cnpm install --save-dev less less-loader //安装less 不需要可不装
//webpack.config.js内容如下
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
app: path.join(__dirname, "./src/index.jsx")
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: { minimize: true }
}]
},
{
test: test: /\.s?css$/, //用less 这里/\.(less|css)$/
use: [
MiniCssExtractPlugin.loader,
"css-loader", // 编译css
"sass-loader" // 编译scss 不需要可删除
"less-loader" // 编译less 不需要可删除
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
//新建scss（css）文件 内容
h1{
color:red;
}
//在index.jsx中引入
import './style/common.scss';
//在src文件夹内创建 index.html 内容如下
八、配置自动刷新
//安装
npm i webpack-dev-server --save-dev
//在package.json中添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader",
"start": "webpack-dev-server --mode development --open"
},
//一下是现阶段完整的 package.json
{
"name": "oa_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"sass-loader": "^8.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
}
//另 配置启动端口什么的在webpack.config.js中 添加
devServer: {
contentBase: './dist', //对外提供的访问内容的路径
port: 3000,//提供访问的端口 不写会自动寻找可用端口 初始8080
hot: true, 指定使用的host。默认情况下是localhost
historyApiFallback: true, //单页面路由下开启 解释太长了 需要的话自己去查
}
//运行 npm start 可直接打开浏览器 并实现热更新
九、其他处理配置
//url-loader 获取图片或者字体文件 base64 的方式引入代码中
npm install url-loader --save-dev
{
test: /\.(jpg|png|gif)/,
use: ['url-loader']
}
//react路由模块
npm i react-router-native
npm install --save react-router-dom
//引入JQ
npm install jquery --save
//使用
require("expose-loader?$!jquery");
//antd 蚂蚁金服打造的一个react组件
npm install babel-plugin-import -D
npm i -D @babel/plugin-proposal-class-properties
npm install antd --save
//.babelrc添加内容
{
"presets": [
"@babel/env",
"@babel/react"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
}
//scss,less模块化 安装 style-loader，sass-loader，less-loader
npm install style-loader --save-dev
cnpm install --save-dev node-sass sass-loader
cnpm install --save-dev less less-loader
//更改webpack.config.js
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader?modules', 'sass-loader']
},
//页面调用 与js调用模块一样的用法
import style from '../styles/common.scss';
.color{
color:red;
}