使用webpack搭建一个react项目

npm init

package.json文件配置

{  "name": "serach-bar",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "dev": "webpack-dev-server --progress --profile --colors --hot",    "build": "webpack --progress --profile --colors",    "test": "karma start"  }, //scripts这边可以改一下，改start可以，在终端用npm start,上面有例子~这边的dev要改的话在终端的命令是'npm run dev;  "author": "",  "license": "ISC",  "devDependencies": {    "babel-core": "^6.22.1",    "babel-loader": "^6.2.10",    "babel-plugin-react-transform": "^2.0.2",    "babel-preset-es2015": "^6.22.0",    "babel-preset-react": "^6.22.0",    "babel-preset-react-hmre": "^1.1.1",    "bootstrap": "^4.0.0-alpha.2",    "css-loader": "^0.26.1",    "file-loader": "^0.10.0",    "html-webpack-plugin": "^2.28.0",    "jquery": "^3.1.1",    "jshint": "^2.9.4",    "jshint-loader": "^0.8.3",    "json-loader": "^0.5.4",    "node-sass": "^4.5.0",    "react": "^15.4.2",    "react-dom": "^15.4.2",    "react-transform-catch-errors": "^1.0.2",    "react-transform-hmr": "^1.0.4",    "redbox-react": "^1.3.3",    "sass-loader": "^4.1.1",    "style-loader": "^0.13.1",    "url-loader": "^0.5.7",    "webpack": "^2.2.1",    "webpack-dev-server": "^2.3.0"  }}

配置的插件不一定所有的都会用到

webpack.config.js文件配置

var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');var ROOT_PATH = path.resolve(__dirname);var APP_PATH = path.resolve(ROOT_PATH, 'app');var BUILD_PATH = path.resolve(ROOT_PATH, 'build');module.exports = {    devtool: 'eval-source-map',    entry: __dirname + '/app/index.js',//webpack的入口文件只有一个，所以写的所有components甚至包括css/json什么的，都要引用在这里output:{    path: __dirname +'/public',    filename: 'bundle.js',},//我这边是新建了一个folder叫public，用来放index.html和bundle.jsdevServer: {    contentBase: "./public",//本地服务器所加载的页面所在的目录    historyApiFallback: true,//不跳转    inline: true//实时刷新},plugins: [    new HtmlWebpackPlugin({        title: 'searchBar',    //配合html-webpack-plugin的配置    })],module: {    loaders: [    {        test: /\.(png|jpq)$/,        loader: 'url? limit = 40000'    },{        test: /\.js$/,        loader:'babel-loader',        include: APP_PATH,    }]},resolve:{        extensions: ['','.js', '.jsx']    },};

.babelrc

{    'presets':['react','es2015'],    'env':{    'development':{    'presets':['react-hmre']    }    }}