ERROR in ./src/index.js 15:12 Module parse failed: Unexpected token (15:12) You may need an appropriate loader to handle this file type.

[1004589696]

const path = require('path');
const Glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

//生成html文件的插件
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, '../src/index.html'),//模板文件
    filename: 'index.html'//生成文件名
});

//独立打包css文件插件
const cssPlugin = new MiniCssExtractPlugin({
    filename: "index.css",
    chunkFilename: "[id].css"
});

//消除未使用的CSS
const cssPurifyPlugin = new PurifyCSSPlugin({
    paths: Glob.sync(path.join(__dirname, 'src/*.html')),
});

//压缩css文件
const optimizeCssPlugin = new OptimizeCssAssetsPlugin({
    cssProcessor: require('cssnano'), //引入cssnano配置压缩选项
    cssProcessorOptions: {
        discardComments: { removeAll: true }
    },
    canPrint: true //是否将插件信息打印到控制台
});



module.exports = {
    // mode: 'development', //development  production ( 生产环境会将代码压缩 )
    entry: {//设置入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
        main: path.resolve(__dirname, "../src/index.js"),
    },
    output: {//设置出口文件
        path: path.resolve(__dirname, "../dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/ // 在使用babel-loader时候一定要加上exclude,排除node_modules文件夹
            },
            // 解析css文件
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            // 解析less
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },
            // 解析sass
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            // 编码图片
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: ['url-loader?limit=8192&name=[path][name]-[hash:6].[ext]&outputPath=img/']
            },
            // 编码字体
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: 'file-loader'
            },
            // 处理html模板文件
            {
                test: /\.(htm|html)$/,
                use: ['html-loader']
            }
        ]
    },
    plugins: [
        cssPlugin,
        cssPurifyPlugin,
        optimizeCssPlugin,
        htmlPlugin
    ],
    //webpack服务配置 基于webpack-dev-server
    devServer: {
        //设置目录结构
        contentBase: path.resolve(__dirname, "../dist"),
        // 服务器IP地址
        host: "localhost",
        // 服务端压缩是否开启
        compress: true,
        // 配置端口号
        port: 3000,
        open: true,             // 自动打开浏览器
        inline:true,
        hot: true               // 开启热更新
    }
};

"devDependencies": {
    "@babel/core": "^7.2.0",
    "autoprefixer": "^9.4.2",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.1",
    "ess-loader": "^0.4.1",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "mini-css-extract-plugin": "^0.4.5",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-router-dom": "^4.3.1"
  }

[nicolo-ribaudo]

What is your Babel config? And what is there inside src/index.js?

[YoungCC2]

I have the same problem.

i think it was JSX of question. but i dont how to resloved it .

[danez]

@YoungCC2 There are a couple of problems with your config:

1. @babel/preset-flow is a preset and should be listed under preset and not plugins
2. The more important problem, and why you are seeing this error is the regex in the test key: (\.jsx|\.js\.ts). There is a pipe missing, it should be: (\.jsx|\.js|\.ts) (or if you also want to support tsx files: \.(j|t)sx?)

[AnuragVnit]

I am having the same problem.

my webpack config is

`

[nicolo-ribaudo]

Babel config?

[AnuragVnit]

sorry nicolo.. for the late reply.

this is the content of my babelrc file

{
    "presets": [
        "env",
        "react",
        "stage-2"
    ]
}

[Lernopus]

i have same problem. Kindly give solution or reason for this.