Webpack、babel、およびes 6とcommonJSの間の連絡について

ここでは以上のいくつかの概念と彼らの関係を整理します.
現在のブラウザの多くはes 6の構文をサポートしていないか、一部のサポートにすぎません.例えば、.360ブラウザを使用すると、letをサポートしているのに矢印関数をサポートしていないことがわかります.
babelは「翻訳」の役割を果たし、es 6の書き方をes 5の書き方に変換した.しかし、あるプロジェクトでbabelを個別にインストールし、新しいファイルを生成することに成功した人もいるかもしれませんが、ブラウザにインポートしたファイルが間違っていることに気づきました.その中で誤解される可能性が高いのがimportというキーワードです.
実際にbabel変換後のコードはcommonJS仕様に従っているが,この仕様ではブラウザは認識できない.したがってブラウザにインポートするとエラーが報告され、nodeJSはcommonJSの実装者であるため、babel変換後のコードはnodeで実行できます.
babelで生成されたcommonJS仕様のes 5の書き方をブラウザ上で直接実行するために、webpackというパッケージツールを借りて完成しました.webpack自体もcommonJSという仕様に従っているので、そのプロファイルからwebpack.config.jsでわかる

//module.exports commonJS       ，es6    export
module.exports = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        path: path.join(__dirname, 'outs'),
        filename: 'index.js'
    },
};

Es 6とcommonJSの関係.
es 6規格が出るまでは、みんなcommonJSかAMD仕様でモジュール化されていました.es 6はcommonJSのものを使っていないので、彼らの間には必要な連絡はありません.ここではes 6とcommonJSのインポートと出力の違いについてのみ説明しますが、その他の詳細はご自身でご理解ください
commonJSに導入されたファイルと出力インタフェースはそれぞれ

require('./a');//  
//    
module.exports={
a:xxx,
b:function(){
     }
}

es 6の書き方は

//  
import {a,b,c} from './a';

//  
export {a,b,c}

だからes 6のexportとcommonJSのmoduleをexportsは比較に来て、彼らは全く違うものです.ネット上で見たコードについては、exportを使ったりmoduleを使ったりします.exportsの違いは、es 6の仕様で書かれているかどうかだけで、完全なプロセスはes 6->es 5(commonJS仕様)->ブラウザ実行可能コードです.ポイントは彼らが直接es 5で書くかes 6で書くかだけで、es 6を使うと変換のステップが1つ増えます
では、私たちはどのようにwebpackを利用してすべてのステップを完了すればいいのでしょうか.すなわち、babel命令を単独で生成することなく、es 6の書き方でブラウザが認識できるコードを直接生成する.Webpackは私たちに一連の案を提供してくれた.

まず空白のプロジェクト

を作成します.

プロジェクトに入り、以下の依存

をインストールします.

-  npm install --save webpack
-  npm install --save babel-loader
-  npm install --save babel-core
-  npm install --save babel-preset-es2015

babelからアップグレード6.xバージョン以降は2つのプラグインに分かれています.1つはbabel-core【端末実行】、1つはbabel-cliをインストールしてください.1つはbabel-preset-es 2015です.
上記の内容をインストール後、1つ設定する必要がある.babelrcのファイルはルートディレクトリの下に置いて、内容は

{
  "presets": ["es2015"]
}

そしてwebpack.config.jsでbabel-loaderを構成する

module.exports = {
    entry: "./js/main.js",
    output:{
        filename: 'bundle.js'

    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: "babel-loader"

        }]

    }
}

設定が完了すると、直接JSファイルでes 6の構文を使用し、webpackコマンドでパッケージングして生成できます.