Webpack技术总结

Webpack

搭建webpack + react + babel + material-ui环境

npm init
# 一路Enter
npm install --save-dev webpack
# 安装webpack
npm install --save react react-dom react-router react-tap-event-plugin material-ui
# 生产用的 React 与 Material-UI 部分
npm install --save-dev babel-core babel-loader
# Babel转换器的核心部分
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
# Babel转换器的三个额外配置

要安装的就那么多了。

接下来编辑以下配置文件： vim .babelrc，写入以下内容

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "plugins": []
}

vim webpack.config.js，写入以下内容

var path = require('path');
module.exports = {
    entry: './index.jsx',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

vim package.json，更改scripts域

  "scripts": {
    "build": "webpack",
    "build-dev": "webpack -w -d"
  }

编写入口文件：vim index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from "react-router"
import routes from './src/routes'
ReactDOM.render(
  <Router history={hashHistory}>{routes}</Router>,
  document.getElementById('container'));