webpack安装babel的时候出现版本问题

Error: Cannot find module '@babel/core’问题

主要是在安装babel的时候出现版本问题

问题产生的原因

babel-loader和babel-core版本不对应所产生的，

babel-loader 8.x对应babel-core 7.x

babel-loader 7.x对应babel-core 6.x

其次需要把package.json里babel的模块版本统一

资料里所说的修改.babelrc文件在根目录没有的话可以新建一个

webpack教程
更新步骤

import styles from '!style-loader!css-loader!./Greeter.css';//导入

require("!style-loader!css-loader!./main.css");

学习过程中发现需要这样在js中引用css模块否则在使用html-webpack-plugin生成模板页时 npm start会报错

出现Error: Chunk.entrypoints:UseChunks.groupsIterableandfilterbyinstanceof Entrypoint instead的原因是

extract-text-webpack-plugin目前还没有webpack4版本。可以使用该方式npm install extract-text-webpack-plugin@next解决

//教程中的例子使用webpack 4的话有挺多问题
//最后有效的配置应该如下
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle-[hash].js"
    },
    devtool: 'null', //注意修改了这里，这能大大压缩我们的打包代码
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env", "@babel/preset-react"
                    ]
                }
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true, // 指定启用css modules
                        localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin("style.css"),
        new CleanWebpackPlugin()
    
    ],

  optimization: {
    minimizer: [
             new UglifyJSPlugin({
                 uglifyOptions: {
                     output: {
                         comments: false
                     },
                     warnings: false,
                     compress: {
                         drop_debugger: true,
                         drop_console: true
                     }
                 }
             }),
         ]
   }
};