Webpack+react+typescript Development environment

Webpack+react+typescript Development Environment Webpack

A front-end packaging tool developed by Facebook's Instagram team, Webpack is based on dependency for code integration than some of the front-end automated building tools such as Gulp and grunt. That is, there must be a portal file, which will introduce other script files, then webpack all the files through these dependencies, and automatically generate sourcemap to facilitate debugging. Dependence directory Structure

The basic development environment needs to install node, NPM, and so on, and then you need to use NPM to install Webpack and typescript. Specific methods of use can refer to two official documents:

First, establish the directory structure of the project:

mkdir webpackproject
cd webpackproject
mkdir src
mkdir dist
cd src
mkdir components

Get the following directory structure: dependent installation

First Initialize NPM

NPM Init

Look at the way to fill out on it, if only the test environment can enter the road down.

Install Webpack and typescript:

NPM install-g Webpack typescript

Now the domestic NPM speed is relatively slow, you can use Ali himself built in the domestic NPM Mirror station: CNPM to rely on installation.

To install react related dependencies:

NPM Install--save-dev react react-dom @types/react @types/react-dom

When building the development environment, some webpack plug-ins are needed to help complete the code packaging, and since we are using the typescript of this JavaScript super set for development, we have to install the Webpack typescript parsing tool, And in the code now built by this automated build tool, the code is compressed or packaged, which means that at the time of the error, there is no knowing where the error is, so now Chrome supports SOURCEMAP to locate the code, Here Sourcemap not specifically explained, interested students can search their own internet.

To install the Webpack dependency tool:

NPM Install--save-dev ts-loader source-map-loader
npm link typescript
npm install--save-dev Webpack-dev-server

When all the dependencies are installed, you can now initialize git or bower to your needs. Environment Configuration

You can specify some of its configurations when using typescript:

TSC--init

Generate typescript configuration file with the command above: Tsconfig.json

{
    "compileroptions": {"
        OutDir": "./dist/",
        "Sourcemap": True,
        "Noimplicitany": True,
        "module" : "Commonjs",
        "target": "ES5",
        "jsx": "React"
    },
    "Files": [
        "./src/components/hello.tsx",
        "./src/index.tsx"
    ]
}

In the files array, we put two files, index.tsx as the entry file in the two files, hello.tsx file as the introduced content:

Index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import {Hello} from "./components/Hello";

ReactDOM.render (
    <Hello compiler = "TypeScript" framework = "React" />,
    document.getElementById ("example")
);
Hello.tsx

import * as React from "react";

export interface HelloProps {compiler: string; framework: string;}

export class Hello extends React.Component <HelloProps, {}> {
    render () {
        return <h1> Hello from {this.props.compiler} and {this.props.framework}! </ h1>;
    }
}
Then configure webpack's configuration file:

webpack.config.js

var path = require ("path");
module.exports = {
    // The path of the entry file
    entry: "./src/index.tsx",
    output: {
      // packaged output path
        path: path.resolve (__ dirname, "dist"),
        filename: "bundle.js",

    },

    // enable sourceMap
    devtool: "source-map",

    resolve: {
        // Add the file format to be parsed
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    // loaded modules, including ts and source-map
    module: {
        loaders: [

            {test: /\.tsx?$/, loader: "ts-loader"}
        ],

        preLoaders: [

            {test: /\.js$/, loader: "source-map-loader"}
        ]
    },
    // webpack-dev-server's local server configuration
    devServer: {
        contentBase: "./",
        colors: true,
        historyApiFallback: true,
        inline: true
    },


    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};
Add an index.html html file to the project root directory to introduce the packaged file generated by webpack:

<! DOCTYPE html>
<html>

<head>
    <meta charset = "UTF-8" />
    <title> Hello React! </ title>
</ head>

<body>
    <div id = "example"> </ div>

    <!-Dependencies->
    <script src = "http: // localhost: 8080 / webpack-dev-server.js"> </ script>
    <script src = "./ node_modules / react / dist / react.js"> </ script>
    <script src = "./ node_modules / react-dom / dist / react-dom.js"> </ script>

    <!-Main->
    <script src = "./ dist / bundle.js"> </ script>
</ body>

</ html>
verification
Run under the root directory:

webapck
You can see that a bundle.js file is generated as a packaged script file:

/ ****** / (function (modules) {// webpackBootstrap
/ ****** / // The module cache
/ ****** / var installedModules = ();
/ ****** /
/ ****** / // The require function
/ ****** / function __webpack_require __ (moduleId) {
/ ****** /
/ ****** / // Check if module is in cache
/ ****** / if (installedModules [moduleId])
/ ****** / return installedModules [moduleId] .exports;
/ ****** /
/ ****** / // Create a new module (and put it into the cache)
/ ****** / var module = installedModules [moduleId] = {
/ ****** / exports: (),
/ ****** / id: moduleId,
/ ****** / loaded: false
/ ****** /};
/ ****** /
/ ****** / // Execute the module function
/ ****** / modules [moduleId] .call (module.exports, module, module.exports, __webpack_require__);
/ ****** /
/ ****** / // Flag the module as loaded
/ ****** / module.loaded = true;
/ ****** /
/ ****** / // Return the exports of the module
/ ****** / return module.exports;
/ ****** /}
/ ****** /
/ ****** /
/ ****** / // expose the modules object (__webpack_modules__)
/ ****** / __webpack_require __. m = modules;
/ ****** /
/ ****** / // expose the module cache
/ ****** / __webpack_require __. c = installedModules;
/ ****** /
/ ****** / // __webpack_public_path__
/ ****** / __webpack_require __. p = "";
/ ****** /
/ ****** / // Load entry module and return exports
/ ****** / return __webpack_require __ (0);
/ ****** /})
/ ************************************************* *********************** /
/ ****** / ([
/ * 0 * /
/ *** / function (module, exports, __webpack_require__) {

    "use strict";
    var React = __webpack_require __ (1);
    var ReactDOM = __webpack_require __ (2);
    var Hello_1 = __webpack_require __ (3);
    ReactDOM.render (React.createElement (Hello_1.Hello, {compiler: "TypeScript", framework: "React"}), document.getElementById ("example"));


/ *** /},
/* 1 */
/ *** / function (module, exports) {

    module.exports = React;

/ *** /},
/* 2 */
/ *** / function (module, exports) {

    module.exports = ReactDOM;

/ *** /},
/ * 3 * /
/ *** / function (module, exports, __webpack_require__) {

    "use strict";
    var __extends = (this && this .__ extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty (p)) d [p] = b [p];
        function __ () {this.constructor = d;}
        d.prototype = b === null? Object.create (b): (__. prototype = b.prototype, new __ ());
    };
    var React = __webpack_require __ (1);
    var Hello = (function (_super) {
        __extends (Hello, _super);
        function Hello () {
            _super.apply (this, arguments);
        }
        Hello.prototype.render = function () {
            return React.createElement ("h1", null,
                "Hello from",
                this.props.compiler,
                "and",
                this.props.framework,
                "!");
        };
        return Hello;
    } (React.Component));
    exports.Hello = Hello;


/ *** /}
/ ****** /]);
// # sourceMappingURL = bundle.js.map
The specified sourceMap file will also be generated.

If you run:

webpack-dev-server --inline
You can access this project by visiting localhost: 8080. And supports cold refresh, that is, after updating a file, it will refresh all the content of the entire project, you can also modify the webpack configuration to support hot refresh, only update the code of the corresponding module.

For other webpack specific content, please refer to the official webpack reference documentation.