鍍金池/ 問(wèn)答/HTML/ 使用webpack打包報(bào)錯(cuò):Uncaught SyntaxError: Unex

使用webpack打包報(bào)錯(cuò):Uncaught SyntaxError: Unexpected token <

如題

Uncaught SyntaxError: Unexpected token <

Uncaught SyntaxError: Unexpected token <

Uncaught SyntaxError: Unexpected token <

webpack配置如下:
base.js

const webpack = require("webpack");
const { resolve, join } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //主要有兩個(gè)作用:1、將打包后html文件引入script、link;2、創(chuàng)建一個(gè)模板頁(yè)的html入口文件
const CopyWebpackPlugin = require("copy-webpack-plugin"); // 在webpack中拷貝文件和文件夾
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const CLIENT_FOLDER = resolve(__dirname, "./../");
const SERVER_FOLDER = resolve(__dirname, "./../server");
const nodeModulesPath = resolve(__dirname, "./../node_modules");

let config = {
    devtool: "#cheap-module-eval-source-map", //默認(rèn)模式,便于從打包后的文件中找到子文件
    entry: {
        "modules/admin": [
            "babel-polyfill",
            CLIENT_FOLDER + "/src/modules/admin/app"
        ],
        "modules/front": [
            "babel-polyfill",
            CLIENT_FOLDER + "/src/modules/front/entry-client"
        ]
    },
    output: { //這里的輸入好像被覆蓋了,等等回來(lái)看
        path: CLIENT_FOLDER + "/dist",
        filename: "[name].ymc.js",
        publicPath: "/"
    },
    externals: { //將編輯器模塊排除
        simplemde: "SimpleMDE"
    },
    plugins: [],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        less: [
                            "vue-style-loader",
                            "css-loader?minimize",
                            "less-loader"
                        ],
                        css: ["vue-style-loader", "css-loader?minimize"]
                    },
                    preserveWhitespace: false,//默認(rèn)true,設(shè)置為 false,模版中 HTML 標(biāo)簽之間的空格將會(huì)被忽略
                    postcss: [
                        require("autoprefixer")({
                            browsers: ["last 7 versions"]
                        })
                    ]
                }
            },
            {
                test: /\.js[x]?$/,
                loader: "babel-loader",
                exclude: nodeModulesPath,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader?minimize", "less-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader?minimize"]
            },
            {
                //對(duì)圖片路徑進(jìn)行處理,超過(guò)小于10000轉(zhuǎn)base64
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "img/[name].[hash:7].[ext]"
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "fonts/[name].[hash:7].[ext]"
                }
            }
        ]
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        modules: [nodeModulesPath],
        alias: {//設(shè)置別名,簡(jiǎn)化路徑!
            vue$: "vue/dist/vue.esm.js",
            vuex$: "vuex/dist/vuex.esm.js",
            "vue-router$": "vue-router/dist/vue-router.esm.js",
            simplemde$: "simplemde/dist/simplemde.min.js",
            "highlight.js$": "highlight.js/lib/highlight.js",
            fastclick: "fastclick/lib/fastclick.js",

        }
    },
    cache: true,//默認(rèn)值,緩存webpack配置,提高打包速度
};

module.exports = config;

pro.js

const webpack = require("webpack");
const merge = require("webpack-merge"); //合并webpack配置
const { resolve, join } = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //設(shè)置Html模板文件的引入和配置
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //將css文件從js中單獨(dú)抽離出來(lái)

const base = require("./webpack.base.config"); //基礎(chǔ)webpack配置文件
const CLIENT_FOLDER = resolve(__dirname, "./../");
const SERVER_FOLDER = resolve(__dirname, "./../server");
const nodeModulesPath = resolve(__dirname, "./../node_modules");

const productionEnv = process.env.NODE_ENV === "production" ? true : false;

let config = merge(base, {
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // 開(kāi)啟全局的模塊熱替換(HMR)

        new webpack.NamedModulesPlugin(),
        // 當(dāng)模塊熱替換(HMR)時(shí)在瀏覽器控制臺(tái)輸出對(duì)用戶(hù)更友好的模塊名字信息,
        // 使模塊呈現(xiàn)相對(duì)路徑顯示

        new HtmlWebpackPlugin({
            filename: "admin.html",
            template: CLIENT_FOLDER + "/src/modules/admin/index.html",
            inject: "body",//js文件防止的位置,默認(rèn)true,參數(shù):true、body、head、false
            chunks: productionEnv
                ? [
                      "modules/manifest_admin",
                      "modules/vendor_admin",
                      "modules/admin"
                  ]
                : ["modules/admin"],
            minify: {
                // 壓縮的方式;分別是移除注解、合并文檔中的空白、刪除可刪除的引號(hào)
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
            }
            //chunksSortMode: 'dependency'//chunks的插入順序
        }),

        new HtmlWebpackPlugin({
            filename: "front.html",
            template: CLIENT_FOLDER + "/src/modules/front/index.html",
            inject: 'body',
            chunks: productionEnv
                ? [
                      "modules/manifest_front",
                      "modules/vendor_front",
                      "modules/front"
                  ]
                : ["modules/front"],
            minify: {
                // 壓縮的方式
                // removeComments: false,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
            }
            //chunksSortMode: 'dependency'//決定了 script 標(biāo)簽的引用順序;默認(rèn)有四個(gè)選項(xiàng),'none', 'auto',
        }),
        // 配置提取出的樣式文件
        new ExtractTextPlugin("css/[name].[contenthash].css"),//contenthash是extraTextPlugin插件避免引用其css的文件改動(dòng),css文件也被重新構(gòu)建,就是說(shuō)不改動(dòng)css,content文件是不會(huì)變的

        new webpack.DefinePlugin({//創(chuàng)建編譯時(shí)的全局常量
            "process.env.NODE_ENV": JSON.stringify(
                process.env.NODE_ENV || "development"
            ),
            "process.env.VUE_ENV": '"client"'
        })
    ]
});
config.entry["modules/admin"].unshift(
    "event-source-polyfill",
    "webpack-hot-middleware/client?reload=true"
);
config.entry["modules/front"].unshift(
    "event-source-polyfill",
    "webpack-hot-middleware/client?reload=true"
);

if (process.env.NODE_ENV === "production") {
    // 刪除devtool
    delete config.devtool;
    // 刪除webpack-hot-middleware
    config.entry["modules/admin"].splice(0, 2);
    config.entry["modules/front"].splice(0, 2);
    config.output.filename = "[name].[chunkhash:8].min.js";//重置輸出目錄
    // 提取css
    config.module.rules[0].options.loaders = {
        less:ExtractTextPlugin.extract({
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: true,
                        sourceMap: true
                    }
                },
                {
                    loader: "less-loader",
                    options: {
                    }
                }
            ],
            fallback: "vue-style-loader"
        }),
        css: ExtractTextPlugin.extract({
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: true,
                        sourceMap: true
                    }
                }
            ],
            fallback: "vue-style-loader"
        })
    };
    // 刪除HotModuleReplacementPlugin和NamedModulesPlugin
    config.plugins.shift();
    config.plugins.shift();
    config.plugins = config.plugins.concat([
        new webpack.optimize.UglifyJsPlugin({
            // 最緊湊的輸出
            beautify: false,
            // 刪除所有的注釋
            comments: false,
            compress: {
                // 在UglifyJs刪除沒(méi)有用到的代碼時(shí)不輸出警告
                warnings: false,
                // 刪除所有的 `console` 語(yǔ)句
                // 還可以兼容ie瀏覽器
                drop_console: true,
                // 內(nèi)嵌定義了但是只用到一次的變量
                collapse_vars: true,
                // 提取出出現(xiàn)多次但是沒(méi)有定義成變量去引用的靜態(tài)值
                reduce_vars: true
            }
        }),
        // 分別提取vendor、manifest
        new webpack.optimize.CommonsChunkPlugin({
            name: "modules/vendor_admin",
            chunks: ["modules/admin"],
            minChunks: function(module, count) {
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(nodeModulesPath) === 0
                );
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "modules/manifest_admin",
            chunks: ["modules/vendor_admin"]
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "modules/vendor_front",
            chunks: ["modules/front"],
            minChunks: function(module, count) {
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(nodeModulesPath) === 0
                );
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "modules/manifest_front",
            chunks: ["modules/vendor_front"]
        }),
        // copy static
        // new CopyWebpackPlugin([
        //     {
        //         from: CLIENT_FOLDER + "/static",
        //         to: CLIENT_FOLDER + "/dist/static",
        //         ignore: [".*"]
        //     }
        // ])
    ]);
}
// console.log(config);
module.exports = config;
回答
編輯回答
默念

看這個(gè)錯(cuò)誤信息很像是你的代碼里有 ES6 的箭頭函數(shù),但沒(méi)有使用 babel 進(jìn)行編譯

2017年8月4日 16:00
編輯回答
乖乖瀦

這個(gè)是代碼上的語(yǔ)法錯(cuò)誤。大與號(hào)不識(shí)別,這個(gè)有可能是樓上說(shuō)的,你用es6語(yǔ)法的箭頭函數(shù),在編譯時(shí)沒(méi)有轉(zhuǎn)譯成es5的語(yǔ)法?;钪褪谴a上多寫(xiě)了個(gè)大于號(hào)。感覺(jué)第一個(gè)可能性大,你可以百度查下,怎么6轉(zhuǎn)5

2018年9月19日 06:49