webpack CLIの使用方法インポートできるモジュールを出力しますか？

Question

ここには3つのファイルがあります。

ファイル1：SRC /モジュール/ A/index.js

import b from './b.js'; 
import c from '../c/index.js'; 

const d =() => 'd'; 

export default { b, c, d }; 

ファイル2：SRC /モジュール/ A/b.js

export default() => 'b'; 

ファイル3：SRC /モジュール/ C /index.js

export default() => 'c' 

コードをファイルにパッケージ化する場合は、webpack CLIを使用します。

// file dist/lib/a.js 
const b =() => 'b'; 
const c =() => 'c'; 
const d =() => 'd'; 

export default { b, c, d }; 

Answer 1

あなたはES6コードを使用しているので、あなたはあなたのルートディレクトリにwebpack.config.jsファイルを必要とするこれを行うに、バベルのようtranspilerが必要になります。ここではここwebpack.config.js

const path = require('path'); 

const config = { 
    entry: './src/index.js', // path to your index.js 
    output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'bundle.js', // output file 
    publicPath: 'build/' // output dir 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/ 
     } 
    ] 
    } 
}; 

module.exports = config; 

ための最小限のセットアップは、あなたの最小限のpackage.jsonファイル

、スクリプトを追加さ​​れている

、あなたのDEVを追加

"scripts": { 
    "build": "webpack" 
}, 

npm run buildコマンドを使用して、後でそれを実行することができますあなたは後でnpm installを使ってインストールするか、co mmand

npm i --save-dev babel-core babel-loader babel-preset-env webpack

"devDependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-env": "^1.1.4", 
    "webpack": "^2.2.0-rc.0" 
} 

は、後でes2015のように、他のバベルのプリセットを追加することができますし、stage-0

npm install --save-dev babel-preset-es2015 
npm install --save-dev babel-preset-stage-0 

は今、あなたのルートディレクトリに.babelrcファイルを追加し、このコードを貼り付け、ニーズに応じて、

{ 
"presets": ["babel-preset-env"] 
}