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.

```js
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 // 开启热更新
}
};
```

```jsonc
"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"
}
```