module.exports = {
bail: true,
watch: true,
target: 'web',
entry: paths.allLibraryIndexJs,
output: {
path: paths.appLibraryBuild,
filename: '[name].app.js',
library: '[name]',
libraryTarget: 'umd',
publicPath: publicPath
},
externals: {
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_'
},
react: {
commonjs: 'react',
commonjs2: 'react',
amd: 'react',
root: 'React'
},
'props-types': {
commonjs: 'props-types',
commonjs2: 'props-types',
amd: 'props-types',
root: 'PropsTypes'
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'react-dom',
root: 'ReactDOM'
},
redux: {
commonjs: 'redux',
commonjs2: 'redux',
amd: 'redux',
root: 'redux'
},
moment: {
commonjs: 'moment',
commonjs2: 'moment',
amd: 'moment',
root: 'moment'
},
'semantic-ui-react': {
commonjs: 'semantic-ui-react',
commonjs2: 'semantic-ui-react',
amd: 'semantic-ui-react',
root: 'semantic-ui-react'
},
'react-redux': {
commonjs: 'react-redux',
commonjs2: 'react-redux',
amd: 'react-redux',
root: 'react-redux'
},
'react-i18next': {
commonjs: 'react-i18next',
commonjs2: 'react-i18next',
amd: 'react-i18next',
root: 'react-i18next'
}
},
resolve: {
modules: [
paths.appSrc,
'node_modules'
],
extensions: ['.js', '.json', '.jsx', 'svg', 'ttf', 'woff', 'eot', '.scss'],
alias: {
'react-native': 'react-native-web'
}
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter
},
loader: require.resolve('eslint-loader')
}
],
include: paths.appSrc
},
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url-loader',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
//{
// test: /\.(js|jsx)$/,
// include: paths.appSrc,
// loader: 'babel-loader',
// options: {
// compact: true
// }
//},
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true
}
},
{
loader: 'sass-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9' // React doesn't support IE8 anyway
],
flexbox: 'no-2009'
})
]
}
}
]
},
extractTextPluginOptions
))
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(svg|woff|woff2|eot)$/,
loader: 'url-loader',
options: {
limit: 50000,
mimetype: 'application/font',
name: './fonts/[name].[ext]'
}
}
]
},
plugins: [
// new HtmlWebpackPlugin({
// inject: true,
// template: paths.appHtml,
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeRedundantAttributes: true,
// useShortDoctype: true,
// removeEmptyAttributes: true,
// removeStyleLinkTypeAttributes: true,
// keepClosingSlash: true,
// minifyJS: true,
// minifyCSS: true,
// minifyURLs: true
// }
// }),
new webpack.DefinePlugin(env.stringified),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // React doesn't support IE8
warnings: false
},
mangle: {
screw_ie8: true
},
output: {
comments: false,
screw_ie8: true
}
}),
new ExtractTextPlugin(cssFilename)
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
}I am using webpack to bundle a library. I am developing it in es6 as a part of another project where it gets transpiled to es5 using a separate webpack config. I want to bundle it as a library/es6 module using webpack/babel-loader, but not able to find a way to prevent babel-loader to transpile it es5. If I don't use babel-loader, it throws me 'module parse failed' error.
I tried looking for a solution in documentation and StackOverflow, but couldn't find it. Please help. I am attaching my current webpack config.
