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

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//實時刷新
    },

};

附:淺談webpack的重要功能——Plugins

http://blog.csdn.net/zhouziyu2011/article/details/69053647

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章