let path=require("path");
let webpack=require("webpack");
let HtmlWebpackPlugin=require("html-webpack-plugin");
let CleanWebpackPlugin = require('clean-webpack-plugin');
let ExtractTextWebpackPlugin=require("extract-text-webpack-plugin");
let index = new ExtractTextWebpackPlugin('./css/index.css');
let reset = new ExtractTextWebpackPlugin('./css/reset.css');

module.exports={

entry:{
    index:"./src/index.js",
    utils:"./src/utils.js"
},
output:{
    filename:"./js/[name].js",
    path:path.resolve("dist")
},
module:{
    rules:[
        {
            test: /\.css$/,
            use: reset.extract({
                use: 'css-loader'
            })
        },
        {
            test: /\.less$/,
            use: index.extract({
                use: 'css-loader',
                publicPath:"../"
            })
        },
        {
            test: /\.(jpe?g|png|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        outputPath: 'images/'
                    }
                }
            ]
        },
        {
            test: /\.(htm|html)$/,
            use: 'html-withimg-loader'
        },
        {
            test: /\.(eot|ttf|woff|svg)$/,
            use: 'file-loader'
        },
        {
            test:/\.js$/,
            //use: 'babel-loader',
            include: /src/,
            exclude: /node_modules/
        }
    ]
},
plugins:[
    new CleanWebpackPlugin("dist"),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template:"./src/index.html",
        hash:true
    }),
    reset,
    index
],
devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: 3000,
    open: true,
    hot: true
}

};

以上是webpack.config.js 文件的代碼

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {

"build": "webpack",
"dev": "webpack-dev-server"

},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {

"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.6"

}

}

以上是package.json 文件的代碼

為什么只要在modules 的配置里面加上{

            test:/\.js$/,
            //use: 'babel-loader',
            include: /src/,
            exclude: /node_modules/
        }
        加上這個 use: 'babel-loader' 就報錯，注釋掉不報錯，很郁悶！搞了幾天了，都沒搞好，請大神幫幫忙！