javascript - webpack2.0打包的vue2.0项目无法解析ES6?
PHP中文网
PHP中文网 2017-05-24 11:37:10
[HTML讨论组]

用了 vuex和vue-router 现在babel好像处理vue文件吗 现在的项目IE11不能打开

/* 2017-04-13 webpack_Demo */
var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var vue = require('vue-loader')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Merge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var public_PATHS = {
    node_modules_Path: path.resolve('./node_modules'),
    public_resource_Path: path.resolve(process.cwd(), './src/public_resource'),
    vendor_Path: path.resolve(process.cwd(), './src/public_resource/vendor'),
};

    
var entry_config = {
    index:['./src/main.js'],    //单页面入口文件
    common:['jquery','vue','common_tools','store']
    
};    

var output_config = {
    path: __dirname+'/build/',
    filename: 'js/[name].js'
};

var module_config ={
    loaders: [
        //css 文件使用 style-loader 和   css-loader 来处理
        {
               test:/\.css$/,
               loader:'style-loader!css-loader'
               
        },
        //在webpack的module部分的loaders里进行配置即可
        { 
            test: /\.js$/,
            exclude: /node_modules|vendor/,
            include:path.resolve(__dirname, './src/'),
            loader: 'babel-loader',
        },
        {
            test:/\.html$/,
            loader:'html-loader'
        },
        {
              test: /\.vue$/,
              loader: 'vue-loader'
        },
        {
            test: /\.(png|gif|jpe?g)$/,
            loader: 'url-loader?limit=20000&name=./img/[name][hash].[ext]'
         }
        
    ]
}

var plugins_config = [
    //warming: this is a Array multips pages web_application need to push htmlwebpackplugin_config_Array
    
    new HtmlWebpackPlugin({
        filename: __dirname+'/build/index.html', //生成的html存放路径,相对于path
        template: path.resolve(__dirname, './src/index.html'), //html模板路径
        
       }),
       new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        filename: "./common/common.js",
        minChunks: Infinity    //仅仅创建公共组件块,不会把任何modules打包进去。并且提供function,以便于自定义逻辑。
    })
];

var resolve_config = {
    extensions: ['.js','.vue', '.css', '.less', '.ejs', '.png', '.jpg','.gif','.html'],    //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
    
    alias: {
        jquery: path.join(public_PATHS.vendor_Path, "/jquery-1.10.2.min.js"),
        basecss:path.join(public_PATHS.public_resource_Path, "styles/base.css"),
        fullpage:path.join(public_PATHS.vendor_Path, "/jquery.fullPage.min.js"),
        pagination:path.join(public_PATHS.vendor_Path, "/jquery.pagination.min.js"),
        common_tools:path.join(public_PATHS.vendor_Path, "/common_tools.js"),
        store:path.join(public_PATHS.public_resource_Path, "state/store.js")
       }    //模块别名定义,方便后续直接引用别名,无须多写长长的地址
   
};

var webpack_config = {
    entry:entry_config,
    output: output_config,
    module:module_config,
    plugins:plugins_config,
    resolve:resolve_config,
    devtool:'source-map'
};


module.exports = webpack_config;

//common function//

/**
 * 获得路径
 * @param globPath: str
 * @param pathDir: str 对比路径
 * @returns obj 
*/
function getEntry(globPath, pathDir) {
    //get from github code 
    var files = glob.sync(globPath);
    var entries = {},
        entry,        //文件
        dirname,    //
        basename,    //文件名
        pathname,    //
        extname;    //文件扩展名

    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);    //返回路径中代表文件夹的部分
        //console.log("dirname返回路径中代表文件夹的部分:==>"+dirname);
        extname = path.extname(entry);    //返回路径中文件的后缀名,即路径中最后一个'.'之后的部分。如果一个路径中并不包含'.'或该路径只包含一个'.' 且这个'.'为路径的第一个字符,则此命令返回空字符串。
        //console.log("extname返回路径中文件的后缀名:==>"+extname);
        basename = path.basename(entry, extname);    //返回路径中的最后一部分
        //console.log("basename返回路径中的最后一部分:==>"+basename);
        pathname = path.normalize(path.join(dirname,  basename));    //规范化路径
        //console.log("pathname规范化路径:==>"+pathname);
        pathDir = path.normalize(pathDir);    //规范化路径
        //console.log("pathDir规范化路径:==>"+pathDir);
        if(pathname.startsWith(pathDir)){
            pathname = pathname.substring(pathDir.length);
            //console.log("pathname判断后:==>"+pathname);   
        };
        entries[pathname] = './' + entry;
    }
    //console.log(entries);
    return entries;
}


/* build dev-server */

var npm_run_type = process.env.npm_lifecycle_event;    //get npm run type string
console.log("npm_run_type==>"+npm_run_type);

var debug,          // is debug
    devServer,      // is hrm mode
    minimize;       // is minimize



if (npm_run_type == "build") { // online mode (线上模式)
    debug = false, 
    devServer = false,
    minimize = true;
}else if (npm_run_type == "build-dev") { // dev mode (开发模式)
    debug = true,
    devServer = false,
    minimize = false;
} else if (npm_run_type == "dev-hrm") { // dev HRM mode (热更新模式)
    debug = true,
    devServer = true,
    minimize = false;
};
/*
 *  Hrm setting
 * (开启热更新,并自动打开浏览器)
 * */
if (devServer) {
    console.log("port:"+devServer);
    var webpackHot='webpack/hot/dev-server';
    config = Merge(
        config,
        {
            plugins: [
                // Enable multi-pass compilation for enhanced performance
                // in larger projects. Good default.
                new webpack.HotModuleReplacementPlugin({
                    multiStep: true
                })
            ],
            devServer: {
                contentBase: __dirname+'//',
                // Enable history API fallback so HTML5 History API based
                // routing works. This is a good default that will come
                // in handy in more complicated setups.
                historyApiFallback: true,

                // Unlike the cli flag, this doesn't set
                // HotModuleReplacementPlugin!
                hot: true,
                inline: true,

                // Display only errors to reduce the amount of output.
                stats: 'errors-only',

                host:'localhost', 
                port: 3100 
                      
            }
        }
    );
}
}

vue:



    
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
阿神

很想吐槽这种下划线的写法,不过重点不是这个

你用的是官方脚手架搭建的项目么,如果是的话应该是使用了落后的babel版本npm装一个babel stage-0版本应该可以

另外,语法解析错误应该提供的是package.json的配置

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号