webpack开发react常用插件和依赖

Posted 2020-09-18 陆漫漫

一、配置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"
}