Javascript 在webpack中,是否可以将相同的入口点输出到两个输出文件,一个通过babel编译到ES5,另一个使用ES6代码
在webpack中,是否可以将相同的入口点输出到两个输出文件,一个通过babel编译到ES5,另一个不使用babel编译到ES6 目前,我有以下网页配置:Javascript 在webpack中,是否可以将相同的入口点输出到两个输出文件,一个通过babel编译到ES5,另一个使用ES6代码,javascript,webpack,ecmascript-6,babeljs,Javascript,Webpack,Ecmascript 6,Babeljs,在webpack中,是否可以将相同的入口点输出到两个输出文件,一个通过babel编译到ES5,另一个不使用babel编译到ES6 目前,我有以下网页配置: const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const ExtractTextPlugin = require('extract-tex
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'output-es5': './src/index.js'
},
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
//https://webpack.js.org/configuration/devtool/
devtool: 'source-map'
plugins: [
new CleanWebpackPlugin(['dist']),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
//https://webpack.js.org/plugins/extract-text-webpack-plugin/
new ExtractTextPlugin('jplist.styles.css'),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { minimize: false }
},
{
loader: 'postcss-loader',
options: {
minimize: false,
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')({warnForDuplicates: false}),
require('postcss-nested')(),
require('postcss-simple-vars')(),
require('autoprefixer')(),
require('postcss-prettify')(),
//require('cssnano')({zindex: false})
]
}
}
]
})
}
]
}
};
我希望得到以下输出:
output-es5.min.js-使用babel编译为es5
output-es6.min.js-es6代码
可能吗
谢谢是的,您的文件可以导出配置数组,而不是导出对象
// You can put shared config in a base config.
const baseConfig = {
entry: './src/index.js', // not needed with webpack4 this is the default
...
};
// Using lodash merge here as it does a deep merge but up to you
const es5Config = merge({}, baseConfig, {
output: { ... },
loaders: { ...babel... },
...
});
const es6Config = merge({}, baseConfig, {
output: { ... },
...
});
module.exports = [es5Config, es6Config];
谢谢,我用Object.assign代替了lodash merge。