webpack2 配置报错求助

问题描述

问 题

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const OpenBrowserPlugin = require("open-browser-webpack-plugin");
const Autoprefixer = require("autoprefixer");

module.exports = {
    entry: path.resolve(__dirname, "./app/index.jsx"),
    output: {
        filename: "[id].[hash].js"
    },

    resolve: {
        extensions: ["js", "jsx"]
    },

    module: {
        // webpack 1.*
        // loaders: [
        //     {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel"},
        //     {test: /\.less$/, exclude: /node_modules/, loader: "style!css!postcss!less"},
        //     {test: /\.css$/, exclude: /node_modules/, loader: "style!css!postcss"},
        //     {test: /\.(png|gif|jpg|jpeg|bmp)$/i, loader: "url-loader?limit=5000"},
        //     {test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader: "url-loader?limit=5000"}
        // ]


        // webpack 3.3.0
        rules: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                    }
                ]
            },
            {
                test: /\.less/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader"
                ]
            },
            {
                test: /\.(png|gif|jpg|jpeg|bmp)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 5000
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|svg|ttf|eot)($|\?)/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            limit: 5000
                        }
                    }
                ]

            }
        ]
    },


    plugins: [
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    Autoprefixer,
                ]
            }
        }),

        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),

        new webpack.HotModuleReplacementPlugin(),

        new OpenBrowserPlugin({
            url: "http://localhost:8080"
        }),

        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == "dev") || "false"))
        })
    ],

    devServer: {
        historyApiFallback: true,
        inline: true,
        hot: true,
        port: 8080
    }

};

解决方案

谢谢各位, 结果整理如下:
use webpack3.3.0 build ReactJS 15.6.1

https://github.com/icbd/init_...

这篇关于webpack2 配置报错求助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！