javascript - 使用webpack报错

问题描述

问 题

这是配置的webpack

import webpack from "webpack";
import glob from "glob";
import path from "path";
import fs from "fs";

let    config = {
        context: path.resolve(__dirname, "src"),
        entry: {
            jsx: "./jsx/app.jsx",
            css: "./style/app.less",
            vendor: [
                "./js/util.js",
                "react",
                "react-dom"
            ]
        },

        output: {
            path: path.join(__dirname, "dist"),
            filename: "bundle.js"
        },

        module: {
            loaders: [{
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                    presets: ["es2015","react"]
                }
            },{
                test: /\.less$/,
                loader: "style-loader!css-loader!autoprefixer-loader!less-loader"
            }]
        },

        plugins: [
            new webpack.BannerPlugin(
                fs
                  .readFileSync("./LICENSE")
                  .toString("utf-8"), {
                entryOnly: true
            }),
            new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
        ]
    }


module.exports = config;

实在是被坑成狗了，不像gulp 有配套的plumber 插件

对应react代码

解决方案

在 webpack 配置里面加 devtool: 'source-map' 就可以用浏览器直接调试代码了。

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