webpack配置react
webpack —— 模块加载器
包管理器-npm cnpm bower yarn
使用webpack 之前 安装两个命令环境
cnpm(npm) i(install) webpack -g
cnpm(npm) i(install) webpack-dev-server -g
验证：
webpack -v
webpack-dev-server -v
webpack组成
a).入口、出口
b).loader(加载器、转换器)
c).plugins（插件）
需要一个配置文件 webpack.config.js 配置webpack的一个具体内容
module.exports={
entry:’./index.js’, //入口文件 自己写的文件
output:{
filename:‘bundle.js’ //出口文件 打包好的文件
}
}
运行webpack 在webpack.config.js 文件里面
webpack 打包一次
webpack -w (watch) 持续监听，并且打包
webpack -p 压缩打包
webpack -pw 持续监听并且压缩打包
自动支持es6的模块语法
导入
import {nnnnn,b as kkkk} from ‘./a’
console.log(nnnnn,kkkk);
导出
const a=12;
const b=5;
export{a as nnnnn,b};
json对象的导入导出
导入
import json from ‘./a’
console.log(json.a,json.b);
导出
export default{a:5,b:3}
devDependencies - 开发所需要的模块
install i css-loader style-loader --save-dev (-D)
初始化package.json
npm init -y
webpack.config.js 配置
module:{
rules:[{
test:/.css$/,
use:[‘style-loader’,‘css-loader’]
}]
}
react - JSX语法进行在webpack支持
react
react-dom
babel
配置babel:
babel-core
babel-loader
babel-preset-es2015
预设 .babelrc
新建的.babelrc是隐藏文件，
苹果：Command+shift+.
windows：显示文件夹隐藏文件
{
preset:[‘es2015’]
}
配置react
react
react-dom
babel-preset-react
npm install react-hot-react -D
安装之后，要更改预设文件内容：
{
preset:[[‘es2015’],[‘react’]]
}
react-hot-loader
npm install react-hot-loader安装的包是最新版，不是最稳定的，可能会报错，建议安装npm install [email protected] -D
webpack.config.js 配置
module.exports={
// 入口文件,可以有多个入口文件
entry:’./index.js’,
// 出口文件
output:{
filename:‘bundle.js’
},
// 模块
module:{
// 规则 css js
rules:[{
// 正则只要是.css结尾的文件都要用到style-loader css-loader，加载的顺序是从右向左，先加载css-loader，这个顺序很重要，不然会报错
test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 43: …css-loader'] }̲, { //正则 只…/,
use:[‘react-hot-loader’,‘babel-loader’],
exclude:/node_modules/
}
]
}
}
1.生产环境 - webpack -pw
2.开发环境 - webpack-dev-server
安装 环境-全局安装
cnpm install webpack-dev-server -g
指定端口号：
webpack-dev-server --port 2717
devServer:{
contentBase:’./app’,指定服务器文件目录
inline:true,//自动刷新
port:1289 //改变端口,
open:true 默认打开浏览器
},