如何使用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输出可导入的模块？

回答

相关问题