首页 > 使用webpack报错

使用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代码


已经解决,原因为

entry: {
    // 并起的文件一定要写在一起
    path: ["./jsx/app.jsx","./style/app.less"],  
    vendor: [
        "./js/util.js",
        "react",
        "react-dom"
    ]
},

不然就是多个点对应一个出口


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

【热门文章】
【热门文章】