您现在的位置:首页 >> 前端 >> 内容

使用webpack的plugins功能报错

时间:2017/8/15 8:54:00 点击:

  核心提示:configuration.module has an unknown property plugins1、问题原因:是webpack版本不同,webpack.config.js配置不一样2、解决方案...

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//实时刷新
    },

};

Tags:使用 用W WE EB 
作者:网络 来源:jiajia1994
  • 上一篇:箭头函数用法
  • 下一篇:解析url中的参数