使用react-pdf打包多出了两个bundle.js

#1

求大神解答下:
最近做了两个项目,第一个没有使用react-pdf,里面打包的东西都在认知范围内;
做第二个项目,由于业务需要查看pdf,所以在网上搜索到react-pdf,然后打包的时候莫名其妙的多出了两个bundle.js,0.bundle.js和1.bundle.js,两个文件一个是614k,一个是725k;
只要删除了引入react-pdf的地方,webpack配置里面删掉react-pdf,打包以后那两个文件就消失;
所以怀疑是不是react-pdf的依赖包,但是不知道是什么。
有没有大神帮我解除疑惑

#2

能否把webpack相关的配置拿出来看下呢? 怀疑是webpack配置中做了公共代码提取,但没有指定chunk name,所以会出现0.bundle.js/1.bundile.js

#3

const svgDirs = [
require.resolve(‘antd-mobile’).replace(/warn.js$/, ‘’), // 1. 属于 antd-mobile 内置 svg 文件
// path.resolve(__dirname, ‘src/my-project-svg-foler’), // 2. 自己私人的 svg 存放目录
]

const extractCSS = new ExtractTextPlugin(‘css/vender.[chunkhash:8].css’);
const extractSCSS = new ExtractTextPlugin(‘css/app.[chunkhash:8].css’);

module.exports = {
entry: {
app: [‘babel-polyfill’, path.resolve(__dirname, ‘src/app.js’)],
vendor: [
‘react’,
‘react-dom’,
‘react-router-dom’,
‘axios’,
‘qs’,
‘rc-form’,
‘react-redux’,
‘redux’,
‘react-pdf’,
‘redux-promise’
]
},

output: {
path: path.resolve(__dirname, ‘build’),
// filename: ‘boundle.js’
filename: ‘js/[name].[chunkhash:8].js’,
chunkFilename: ‘js/[name].bundle.js’,
publicPath: ‘/’ // 打包上线时,引用的js路径头部
},

resolve: {
modules: [‘node_modules’, path.join(__dirname, ‘node_modules’)],
extensions: [’.web.js’, ‘.js’, ‘.json’],
},

module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: [{
loader: ‘babel-loader’,
options: {
presets: [‘env’, ‘react’],
plugins: [[‘import’, { libraryName: ‘antd-mobile’, style: ‘css’ }], ‘syntax-dynamic-import’]
}
}, ‘eslint-loader’]
},
{
test: /.css$/,
use: extractCSS.extract({
fallback: ‘style-loader’,
use: [
{
loader: ‘css-loader’,
options: {
minimize: true
}
},
{
loader: ‘postcss-loader’,
options: {
plugins: [
require(‘autoprefixer’),
pxtorem({
rootValue: 75,
propWhiteList: [],
})
]
}
}
]
})
},
{
test: /.scss$/,
use: extractSCSS.extract({
fallback: ‘style-loader’,
use: [
{
loader: ‘css-loader’,
options: {
minimize: true
}
},
{
loader: ‘postcss-loader’,
options: {
plugins: [
require(‘autoprefixer’),
pxtorem({
rootValue: 75,
propWhiteList: [],
})
]
}
},
‘sass-loader’
]
})
},
{
test: /.(svg)$/i,
loader: ‘svg-sprite-loader’,
options: {
include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
}
},
{
test:/.(woff|eot|ttf)??.*$/,
loader: ‘url-loader’,
options: {
limit: 10240,
name: ‘fonts/[name].[hash:8].[ext]’
}
},
{
test: /.(png|jpg|gif)$/i,
loader: ‘url-loader’,
options: {
limit: 51200, // 50K
name: images/[name].[hash:8].[ext]
}
},
{
test: /.pdf$/i,
loader: ‘url-loader’,
options: {}
}

]

},
plugins: [
new htmlWebpackPlugin({
template: ‘index.html’,
title: config.title,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),

// 定义为生产环境,编译 React 时压缩到最小
new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
}),

new webpack.optimize.UglifyJsPlugin({
    compress: {
      //supresses warnings, usually from module minification
      warnings: false
    },
    output: {
      comments: false
    }
}),

// 分离CSS和JS文件
// new ExtractTextPlugin('[name].[chunkhash:8].css'),
extractCSS,
extractSCSS,

// 提供公共代码
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  filename: 'js/[name].[chunkhash:8].js'
})

]
}