React提供了create-react-app的快速构建工具,但作为一个专业的程序员(老司机),面对复杂的项目,入门级的构建工具,是远远不够的,我们这里从零开始,用webpack,手动配置一个独立的React开发环境,开发环境完成后,支持自动构建,自动刷新,sass语法 等功能...
1. 首先用npm初始化环境
安装相关软件包
2.添加对html静态文件的支持
- 在根目录下新建文件夹src,在src内加入index.html index.js
- 在根目录下新建webpack.config.js
- 在webpack.config.js中加入如下配置
// 负责将html文档虚拟到根目录下
let htmlWebpackPlugin = new HtmlWebpackPlugin({
// 虚拟的html文件名 index.html
filename: 'index.html',// 虚拟html的模板为 src下的index.html
template: path.resolve(__dirname,'./src/index.html')
})
let htmlWebpackPlugin = new HtmlWebpackPlugin({
// 虚拟的html文件名 index.html
filename: 'index.html',// 虚拟html的模板为 src下的index.html
template: path.resolve(__dirname,'./src/index.html')
})
module.exports = {
// 开发模式
mode: 'development',// 配置入口文件
entry: './src/index.js',// 出口文件目录为根目录下dist,输出的文件名为main
output: {
path: path.resolve(__dirname,'dist'),filename: 'main.js'
},// 配置开发服务器,并配置自动刷新
devServer: {
// 根目录下dist为基本目录
contentBase: path.join(__dirname,// 自动压缩代码
compress: true,// 服务端口为1208
port: 1208,// 自动打开浏览器
open: true
},// 装载虚拟目录插件
plugins: [htmlWebpackPlugin],}
在package.json内scripts中添加"dev": "webpack-dev-server"