极简版react+webpack脚手架

发布时间:2016-11-02 18:06:00 来源:赢图云 阅读:0

目录结构

asset/极简版react+webpack
脚手架
  • css/
  • img/

src/

  • entry.js ------------------------ 入口文件

.babelrc

index.html

package.json

webpack.config.js

运行命令

  1. 安装依赖:npm install
  2. 运行项目:npm start

配置预览

package.json

{
  "name": "react_webpack_demo",
  "version": "1.0.0",
  "description": "a demo using react and webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 8080 --hot --inline --progress --colors --devtool eval"
  },
  "author": "Ruth",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "node-sass": "^3.11.2",
    "react-router": "^3.0.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

webpack.config.js

var webpack = require('webpack');

// css 单独打包,使用该插件后就不需要配置style-loader了
// 本来是内联在最终的网页里,现在通过外联方式,可以在/dist文件夹下找到单独的css文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        index: './src/entry.js', // 唯一的入口文件
        vendor: ['react'] // 这里是依赖的库文件配置,和CommonsChunkPlugin配合使用可以单独打包
    },
    output: {
        path: '/dist', //打包后的文件存放的地方
        filename: 'bundle.js',
        publicPath: 'http://localhost:8080/dist/' //启动本地服务后的根目录
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
            loader: 'babel',
            // 可以单独在当前目录下配置.babelrc,也可以在这里配置
            query: {
                // presets: ['es2015', 'react']
            },
            // 排除 node_modules 下不需要转换的文件,可以加快编译
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style", "css")
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style", "css!sass")
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url?limit=819200'
        }]
    },
    plugins: [
        new ExtractTextPlugin('main.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.js'
        })
    ]
};

.babelrc

{
  "presets": [
    "react", 
    "es2015"
  ],
  "plugins": []
}

其他

需要更多其它配置,请参考 webpack_scaffold

github地址:react\_webpack\_scaffold

参考资源

  1. 掘金-react 搜索

  2. 【资料汇总】React (中文)

  3. React.js 2016 最佳实践

  4. React.js 教程

  5. React.js 官网

  6. 十分详细的React入门实例

后记

搞配置的过程中,一直报错,原来是自己没有安装 babel-preset-es2015babel-preset-react,导致即使在 .babelrc 中已经配置了还报错T_T,具体参看 Babel 入门教程


Scoop It and Enjoy the Ride! 美站网

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,
如果涉及侵权请联系站长邮箱:support@yingtwo.com 进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接: https://www.cnblogs.com/Ruth92/p/6023918.html

/template/Home/default/PC/Static