如何使用webpack CLI输出可导入的模块?
问题描述:
这里有三个文件。如何使用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 };
答
由于您使用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"]
}
你正在使用ES6,你需要一个像babeljs这样的转译器来转换你的代码,我不认为你可以用cli来完成。任何人都可以确认吗? – loelsonk