React & TypeScript & Webpack

捣腾一周，一步一步造轮子

尝鲜

⚡️引入 TypeScript 编写更加安全的代码，不再为类型烦恼
⚡️使用 Webpack 3 打包
该文档使用的是TypeScript

环境设置

下载和安装 Node.js
下载和安装依赖管理工具 Yarn
也可以使用npm 去安装 yarn
npm install -g yarn

初始化项目

mkdir project
cd project
yarn init

安装相关依赖

yarn add react react-dom
yarn add @types/node @types/react @types/react-dom @types/webpack webpack typescript awesome-typescript-loader source-map-loader -D

添加 TypeScript 配置文件

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "strict": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "lib": [
      "esnext",
      "dom"
    ]
  }
}

创建 Webpack 配置文件

webpack.config.js

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            {test: /\.(ts|tsx)$/, use: [{loader: 'awesome-typescript-loader'}] },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

编写入口

src/index.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'

export class Hello extends React.Component<{}, {}> {
    render() {
        return 
Hello Tyscript
    }
}
ReactDOM.render(
    ,
    document.getElementById('app')
)

执行 webpack 打包即可

Webpack 扯淡篇

代码分割

yarn add react-loadable
yarn add @types/react-loadable -D

Example

import Loadable from 'react-loadable'
import * as React from 'react'

const Main = Loadable({
  loader: () => import('../components/Main'),
  loading: (() => null),
})

export default class App extends React.Component {
  render() {
    return 
;
  }
}

Webpack也需要做相应的配置
webpack.config.js

  output: {
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js'
  }

---

css抽取

yarn add extract-text-webpack-plugin -D

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                    }]
            })
        },
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename:
        'static/css/[name].[contenthash:8].css',
        allChunks: true
    }),
]

js压缩

yarn add uglifyjs-webpack-plugin -D

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
plugins: [
    new UglifyJSPlugin({
        sourceMap: true,
        compress: {
            warnings: false
        },
        comments: false,
    })
]

提取公用模块

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: (module) => module.context && module.context.indexOf('node_modules') !== -1,
    }),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        chunks: ['vendor']
    }),
]

附 github传送门

参考

• http://www.typescriptlang.org/docs/handbook/react-&-webpack.html