使用webpack的plugins功能报错--configuration.module has an unknown property 'plugins'.

最新推荐文章于 2025-05-19 14:37:34 发布

原创最新推荐文章于 2025-05-19 14:37:34 发布 · 6.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#plugins #node.js

js 同时被 3 个专栏收录

19 篇文章

订阅专栏

工具

14 篇文章

订阅专栏

问题

6 篇文章

订阅专栏

本文针对Webpack配置中出现的未知属性错误进行了解析，并提供了解决方案。通过调整plugins的位置及配置，确保不同版本的Webpack都能正确运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

configuration.module has an unknown property ‘plugins

1、问题原因：是webpack版本不同，webpack.config.js配置不一样

2、解决方案：webpack.config.js（主要看plugins位置）

//注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={
    devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项

    entry:__dirname+'/app/main.js',   //入口文件

    output:{
        path:__dirname +'/public',//打包后的文件存放地方
        filename:"bundle1.js"//打包后输出的文件的文件名
    },

    module: {//在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules'//添加对样式表的处理
            }

        ],
        // // 2.2以下版本（2.1-） plugins要写在module.exports.module里面
        // plugins: [
        //     new HtmlWebpackPlugin({
        //         template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        //     })
        // ],
    },

    //2.2+以上版本 plugins要写在module.exports.module外面(即module.exports里面)
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],

    devServer:{
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        port:'8090',
        inline: true//实时刷新
    },

};