nodejsにreact.jsを取り付け、webpackで梱包します.

2560 ワード

nodejsにreact.jsを取り付け、webpackで梱包します.
この記事では、nodejsに基づいてnpmでreactをインストールするために必要なカバンとwebpackを使って包装することを紹介します.
node.js公式サイトに登録して、node.js公式サイトをダウンロードします.
  • 1、npm init
  • 、npm install–save react react-dom babelify babel-preset-react
  • 、npm install babel-presete-es 2015–save
  • 、webpack使用と構成は、文書のルートディレクトリの下でwebpack.co.fig.jsを作成することができます.注意:ここで使っているwebpackは4.6.
    var webpack = require('webpack');
    var path = require('path');
    
    module.exports = {
        context: path.join(__dirname),
        entry: "./src/js/index.js",
        module: {
            rules: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules)/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                }]
        },
        mode:'none',
        plugins:[],
        output: {
            path: path.join(__dirname),
            filename: "./src/bundle.js"
        }
    };
  • 5、webpackをインストールする
  • 、webpackサーバ(npm install-g webpack-dev-server)
  • をインストールします.
  • 、ローカルインストールwebpackサーバ(npm install-g webpack-dev-server–save)
  • 、ローカルインストールwebpack(npm install webpack–save)
  • 、包装webpack
  • 、絶えず監視(webpack–watch)
  • 11、(webpack-dev-server)自動更新は保存しなくてもいいです.ページの拡張機能はあります.http://localhost:8080/webpack-dev-server
  • 、ホットローディング(webpack-dev-server–contentbase src–inline-hot)
  • 13、chromプラグインreact-develop-tool
  • をインストールします.