首页 > 代码库 > webpack开发react常用插件和依赖
webpack开发react常用插件和依赖
一、配置webpack
1.npm install -g webpack #webpack的cli环境
2.npm install -g webpack-dev-server #webpack自带的服务器
二、各种依赖库
1.npm install babel-core-D #后台编译的babel工具 2.npm install babel-preset-es2015 -D #babel对es2015的预设 3.npm install babel-loader -D #babel加载器
三、webpack本身
1.npm install webpack-dev-server -D #webpack服务器的本地依赖 2.npm install babel-preset-react -D #babel-react预设 3.npm install react -D #react本身 4.npm install react-dom -D #react-dom本身 5.npm install react-hot-loader -D #热更新 6.npm install style-loader -D 7.npm install css-loader -D
四、webpack配置文件(webpack.config.js)
module.exports={ entry:‘./index.js‘, //入口文件 output:{ path:__dirname, filename:‘bundle.js‘//编辑完的文件叫什么 }, devtool:‘source-map‘,//开发工具,防止调试的时候找不到源码在哪儿 module:{//用到的模块 loader:{[ {test:/\.css$/,loader:‘style!css‘},//以css结尾的文件加载cssloader {test:/\.js$/,loader:‘react-hot!babel‘,exclude:/node_module/}//exclude是排除的意思 ]} } }
五、配置babel(.baberc文件)
{ "presets":["es2015","react"] } or { "presets":["es2015","stage-0"] }
六、附一份webpack+angularjs项目的package.json文件
{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "entry": { "index": "./src/index.js" }, "dependencies": { "angular": "^1.6.2", "angular-messages": "^1.6.2", "angular-ui-router": "^0.4.2", "echarts": "^3.5.1", "jqcloud2": "^2.0.2", "jquery": "^3.2.1" }, "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-stage-0": "^6.22.0", "body-parser": "^1.17.1", "cookie-parser": "^1.4.3", "css-loader": "^0.26.1", "express": "^4.15.2", "extract-text-webpack-plugin": "^2.0.0-rc.3", "less-loader": "^2.2.3", "mockjs": "^1.0.1-beta3", "morgan": "^1.8.1", "raw-loader": "^0.5.1", "style-loader": "^0.13.1", "webpack": "^2.3.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server", "build": "webpack" }, "author": "", "license": "ISC" }
webpack开发react常用插件和依赖
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。