MM-V2

morningmeeting v2.0 version upgrade transform

react-webpack-demo

The Stack:

React16 + Redux + Webpack3 + ESLint + Sass + Router4 + Hot Loader + Es6/7

关于

当前项目模版中使用到的技术：

• React 16
• React Router4
• React Hot Loader 模块热加载
• Babel ES6 、ES7 语法转换
• Webpack3 打包工具
• webpack Dev Server
• Redux
• React Router Redux Redux/React 路由绑定.
• ESLint 保持一致的代码风格
• Superagent 接口调用
• bundle-loader 按需要加载相应页面的JS
• Postcss Loader 兼容不同浏览器样式加前缀

安装

npm install
或者
yarn install

运行开发环境

npm run dev

起来在浏览器上输入：http://127.0.0.1:20000/react； /react这个是可以在config.js里进行配置，这个就是route basename。

项目打包

npm run build

项目打包后，会在项目根目录里生成 dist/www目录，拿到这个就可以进行部署了。

如果部署到Nginx里面，如果出现在404的时候，可以参考：Nginx配置ReactJs项目，Url后面直接输入路由路径时老报404问题。

image 引入

render(){
  const image = require('../img/demo.png);
  return(
    <div style={{background:'url(' + image + ')'}}></div>
  );
}

样式引入

render(){
  const styles = require('./scss/style.scss');
  return (
    <div className = {styles.className}> class name</div>
  );
}

---

引入scss

webpack.dev.config

const styles = require('./demo.scss');

render(){
  return(
    <div className={styles.className}>content</div>
  );
}

配置 url:https://github.com/webpack-contrib/css-loader

{
  test: /\.scss$/,
  use: [
    { loader: "style-loader" },
    {
      loader: "css-loader", options: {
        sourceMap: true,
        modules: true, minimize: true,
        localIdentName: '[local]_[hash:base64:5]'
      }
    },
    {loader: "sass-loader", options:{sourceMap:true }}
  ]
}

参与文献

• 从零搭建React全家桶框架教程
• React Redux Universal Hot Example