webpack？？？

4589 ワード

本稿ではWebpackがReactJSを支援して開発した簡単な例を紹介します。
Webpack基礎詳細住所：http://2914905399.iteye.com/blog/2357893
簡単に言えば、webpackはモジュールパッキングツールであり、webpackでは、すべての種類のファイルはモジュールであり、我々の最も一般的なJavaScriptとCSSファイル、画像、jsonファイルなどを含みます。webpackの様々なキャリアを通して、これらのファイルをより効率的に管理することができます。

この記事はwebpackを配置し、簡単なHello，Worldをホームページに出力させます。プログラムはReact jsを使って完成し、ES 2015を使用しました。
1、空の項目を作成し、プロジェクトディレクトリの下でpackage.jsonファイルを作成し、プロジェクト名、依存などに使用します。端末コマンドは以下の通りです。

  npm init

2, 現在のディレクトリにwebpackおよび他の依存性をインストールし、Reactを使用しているので、reactとreact-domを導入しました。

  npm install webpack react react-dom --save-dev
  npm install webpack -g

webpackは管理者権限を取得しないとインストールできない場合があります。スドスは後でinstallで解決できます。

3この時、カタログの下にはpackage.jsonしかありません。ノドガイとmodules二つのファイルは、package.jsonにインストールされた依存関係が見られます。modulesはinstall時に生成されます。
簡単なHello Worldを実現するためには、index.を作成する必要があります。入り口ファイルindex.jsは、簡単なので、ルートディレクトリに置いています。index.は空で、index.jsはウェブページの輸出ハローワールドを実現します。コードは以下の通りです

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends Component {
    render() {
        return (
            <div>
                Hello, World ! ! !
            </div>
        )
    }
}


ReactDOM.render(
    <HelloWorld />,
    document.getElementById('content')
);

4,webpackプロファイルwebpack.co.nfig.jsを作成します。設定します

module.exports = {
    entry: './index.js',
    output: {
        path: '',
        filename: 'bundle.js'
    }
};

ベンry: 入り口ファイルの設定
out put: pathはwebpackパッケージに成功した後、ファイルの保存経路です。 filenameはwebpackパッケージが成功した後のファイル名です。
webpack.co.nfig.jsという名前はwebpackのデフォルトのプロファイルです。この名前を使いたくないなら、いいです。

webpack -config yourname

5,Webpack Loaderをインストールして使用します。
Webpack Loaderの役割：
1,React jsのjsx文をjs文に変換します。
2、ES 2015対応
3は、jsファイルがimportを通じて直接cssなどのスタイル及び写真を導入することができる。
ちょっと待ってください
ReactjsとES 2015を使用したいので、インストールコマンドは以下の通りです。

npm install babel-core babel-loader --save-dev
npm install babel-preset-react babel-preset-es2015 --save-dev

具体的な実現にはwebpack-config.jsにmodule属性を追加する必要があります。

module.exports = {
    entry: './index.js',

    output: {
        publicPath: "",
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    }
};

6,端末にwebpackを入力します。bundle.jsファイルが生成されているのが見えます。このファイルはwebpackのentryファイルのパッケージ化に成功して得られました。保存経路と名前は自分でwebpack.nfig.jsに設定しました。

webpack

7,前に作成したindex.ファイルを修正し、パッケージ作成したbundle.jsファイルを紹介します。コードは以下の通りです

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

8，index.を開けて、私達の必要なHelloを見て、World！！しかし、ファイルを修正して実行するたびに、端末にwebpackを入力してからページを更新する必要があります。このような方法は面倒くさいです。この時はwebpack-dev-serverを使ってページの自動更新を実現したいです。
(1)webpack-dev-serverをインストールする

npm install webpack-dev-server --save-dev
npm install webpack-dev-server -g

（2）package.jsonに追加する

{
  ......
  "scripts": {
    "start": "webpack-dev-server --inline"
  },
  ......
}

（3）配置が完了し、端末に入力する：

npm start

ブラウザに入力するhttp://localhost:8080/ ページにハロー、ワールドが！ main.jsのハロー、Worldを修正します！！ハロー、Curry！二秒待ってください。手動で更新する必要はありません。ページが自動的に更新されます。ハロー、Curryが現れます。！！完成

添付参考サイト：http://www.jianshu.com/p/418e48e0cef1
https://www.zfanw.com/blog/webpack-tutorial.html

Qtソケット簡単通信

消費者側のSpring JMS接続ActiveMQ受信生産者Oozie Serverから送信されたOozie作業実行結果