webpack打包后，js运行报错

Question

打包后的js运行报错

Component 未定义，应该是 ProvidePlugin 插件的问题，我把ProvidePlugin在生产配置文件中配置，打包后就没问题了，但是js体积过大，配置在下面

相关代码

package.json

{
  "name": "autobuild",
  "version": "1.0.0",
  "description": "",
  "private": true,  
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.conf.js",
    "build": "webpack --config webpack.prod.conf.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.5",
    "postcss-pxtorem": "^4.0.1",
    "react-router-dom": "^4.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2"
  },
  "dependencies": {
    "imagemin-webpack-plugin": "^2.1.5",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0"
  },
  "sideEffects": [
    "*.css"
  ]
}

webpack配置文件

1.webpack.base.conf.js

const path = require("path");
const webpack = require('webpack');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //CSS文件单独提取出来

module.exports={
    entry:{
        //不打包：第三方插件 和 公共代码 
        index:[
            './src/index.js',
            './src/js/base.js'
        ]
    },
    output:{
        //webserve 时是否不再起作用
        path:path.resolve(__dirname,'./dist'),
        filename:'[name].js'
    },
    optimization: {
        //打包 第三方库
        //打包 公共文件
        splitChunks: {
            cacheGroups: {
                vendor:{//node_modules内的依赖库
                    chunks:"all",
                    test: /[\\/]node_modules[\\/]/,
                    name:"vendor",
                    minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取
                    maxInitialRequests: 5,
                    minSize: 0,
                    priority:100,
                    // enforce: true?
                }
            }
        },
        runtimeChunk: {
              name: 'manifest'
          }
    },
    module:{
        rules:[
        {
            test: /\.css$/,
            use: [{ 
                loader:"style-loader" ,// MiniCssExtractPlugin.loader, //
            },{ 
                loader: "css-loader" 
            },{
                loader: "postcss-loader"
            }],
            include: path.join(__dirname, 'src'), //限制范围，提高打包速度
             exclude: /node_modules/
        },
        {
            test: /\.(png|jpg|gif|(woff)|(woff2)|(svg)|(eot)|(ttf))$/,
            use: [{ 
                loader: "url-loader",
                options:{
                    limit: 8192, //单位byte，小于8KB的图片都会被编码(base64)放打包在js中
                    name: './images/[name].[ext]' //图片复制到指定位置
                }
            }]
        },{
            test: /\.js$/,
            exclude: /(node_modules)/,//只是节约打包时间，这些文件夹内的js不会babal处理
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env','react']
                }
            }
        }]
    },
    plugins:[

      ]
}

2.webpack.dev.conf.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf.js');
const webpack = require('webpack');

module.exports = merge(baseConfig, {
      mode: 'development',
    devtool: 'inline-source-map',
      devServer: {
        contentBase: './dist',
        hot: true,
        host: "0.0.0.0"
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        
        //这些变量不必再import了
        new webpack.ProvidePlugin({
            $:'jquery',
            React:'react',
            Component:['react','Component'],
            PureComponent:['react','PureComponent'],
            ReactDOM:'react-dom'
        })
    ]
});

3.webpack.prod.conf.js

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf.js');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

module.exports = merge(baseConfig, {
      mode: 'development',
      plugins:[
          new ImageminPlugin({
            pngquant: {//图片质量
                quality: '95-100'
            }
        })
      ]
});

打包文件截图

1.报错时输出

2.修改后输出（把ProvidePlugin配置移动到webpack.dev.conf.js）

Answer 1

我有几个疑问：

1. 为什么webpack.prod.conf.js中的mode为"development"
2. 为什么ProvidePlugin移动到dev.config， 你现在build出来，能正常运行吗？
3. 为什么不使用正常的模块化方式导出react呢？是为了将react拆出来，减少大小吗？

另外我想看一下报错的具体代码是怎么样（报错在哪一行）