webpack打包后，js運行報錯

打包后的js運行報錯

Component 未定義，應(yīng)該是 ProvidePlugin 插件的問題，我把ProvidePlugin在生產(chǎn)配置文件中配置，打包后就沒問題了，但是js體積過大，配置在下面

相關(guān)代碼

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內(nèi)的依賴庫
                    chunks:"all",
                    test: /[\\/]node_modules[\\/]/,
                    name:"vendor",
                    minChunks: 1, //被不同entry引用次數(shù)(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]' //圖片復(fù)制到指定位置
                }
            }]
        },{
            test: /\.js$/,
            exclude: /(node_modules)/,//只是節(jié)約打包時間，這些文件夾內(nèi)的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: {//圖片質(zhì)量
                quality: '95-100'
            }
        })
      ]
});