如何使用webpack CLI輸出可導入的模塊？

文件1：SRC /模塊/一個/ index.js

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

const d =() => 'd'; 

export default { b, c, d };

文件2：SRC /模塊/一個/ 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 };

來源

2017-04-07 iugo

你正在使用ES6，你需要一個像babeljs這樣的轉譯器來轉換你的代碼，我不認爲你可以用cli來完成。任何人都可以確認嗎？ – loelsonk

由於您使用ES6的代碼，你將需要transpiler像巴貝爾，這樣做，你需要一個webpack.config.js文件在你的根目錄下。

這裏是最小的設置爲您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文件

添加腳本，可以在以後通過npm run build命令

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

運行它加入你的開發依賴關係，您可以稍後使用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" 
}

根據您的需求，您可以稍後添加其他Babel預設，像es2015和stage-0

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

現在添加.babelrc文件到您的根目錄下，粘貼此代碼

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

來源

2017-04-07 09:07:09 loelsonk

如何使用webpack CLI輸出可導入的模塊？

回答

相關問題