首先在在你的项目中搭建如下目录
运行 npm init -y 生成package.json
全局安装如下脚本
cnpm i webpack webpack -g
cnpm i webpack webpack-cli -g
webpack4.0后,已经将webpack命令从webpack中分离出来,需要安装webpack-cli
在index.js写一些js
在webpack.config.js配置打包的mode如下,webpack4.0的最大特性是约定大于配置,少很多配置,这和java的springboot框架理念类似,这也是框架发展的趋势
module.exports={
//不配置默认为 'production'
mode:'development'
}
使用webpack 打包生成dist的main.js
在index.js 引入main.js
在index.html打开你的浏览器,可以看到webpack基本使用完毕
接下来配置react了 先解释一下npm的指令
-S就是–save的简写,就行npm默认一个start的字段,你可以不必输入npm run start 而只需输入npm start,这两个效果是一样的。
-D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面,而–save会将包的名称及版本号放在dependencies里面。
运行脚本
cnpm i react react-dom -S
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-react -D
创建,babelrc文件
添加.babelrc的配置
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
在webpack.config.js配置如下
module.exports={
//不配置默认为 'production'
mode:'development',
module: { //要打包的第三方模块
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
}
这时候你就可以使用react的虚拟DOM了
在index.html添加如下
<div id="test1"></div>
在index.js添加
var vdom= <h1> React </h1>
ReactDOM.render(vdom,document.getElementById("test1"));
执行webpack指令打包,打开浏览器,可见,配置完毕
总是执行webpack打包有点麻烦 于是添加webpack-dev-server
运行cnpm i webpack-dev-server -g
在package.json下添加配置”dev”
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},
运行 npm run dev
可以看到webpack-server已经启动,保存立马更新并打开窗口
接下来配置样式
运行如下脚本,添加引入的css样式的
cnpm i style-loader css-loader -D
运行如下脚本,添加自定义的sass模块化样式
cnpm i sass-loader node-sass -D
我们需要引入如bootstrap的样式在全局都生效,而我们自定义的样式只在引入有效,并且不希望其通过组件的传递,使得关联的组件的样式都生效,故需要使用模块化,为了区分,建议自定义的样式使用scss后缀
在webpack.config.js配置如下
const path = require('path')
module.exports = {
mode: 'development', // development production
// 在 webpack 4.x 中,有一个很大的特性,就是 约定大于配置 约定,默认的打包入口路径是 src -> index.js
module: {
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
{ test: /\.css$/, use: ['style-loader', 'css-loader']},
{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' },
//
{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] }
]
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'@': path.join(__dirname, './src') // 这样,@ 就表示 项目根目录中 src 的这一层路径
}
}
}
最后,我们想要为我们传递的props引入类型限制
运行如下脚本
cnpm i prop-types -S