【vue】webpack打包vue项目并且运行在Tomcat里面-阿里云开发者社区

开发者社区> 开发与运维> 正文

【vue】webpack打包vue项目并且运行在Tomcat里面

简介:

在package.json里面是script加入脚本

"publish": " webpack --config webpack.publish.config.js  -p" 

编写webpack.publish.config.js

const webpack=require("webpack");
const path = require('path');
const node_modules = path.resolve(__dirname, 'node_modules');
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlwebpackPlugin=require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: {
            app:path.resolve(__dirname,'src/main.js'),
            vendors:['vue']     
        },
    output: {
        path: path.resolve(__dirname, 'dist/app'),
        filename: 'static/js/[name].js',
    },
    module: {
        loaders: [ 
           {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                query: {
                    presets: ['es2015']
                 }  
            },
            {
                test:/\.less$/,
                loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
            },
            {
                test:/\.scss$/,
                loader:'style-loader!css-loader!autoprefixer-loader!sass-loader'
            },
            {
                 test: /\.(png|jpg|gif)$/,
                 loader:'url-loader?limit=8192&name=./static/img/[name].[ext]'      
            },
            {
                 test: /\.(ttf|woff|svg|eot|woff2)$/,
                 loader:'url-loader?limit=8192&name=./static/font/[name].[ext]'     
            } 
 
        ]
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'vendor', 
            filename: 'vendor.bundle.js', 
            minChunks: Infinity 
        }),
        new UglifyJsPlugin({
            compress:{
                warnings:false
            }
        }),
        new ExtractTextPlugin("static/css/styles.css"),
        new HtmlwebpackPlugin({
            title: 'index',  //生成的页面标题
            filename: 'index.html', //生成的文件名称
            template: 'index.html' //根据index1.html这个模板来生成
            
        }),
        new webpack.ProvidePlugin({  
            $:"jquery",  
            jQuery:"jquery",  
            "windows.jQuery":"jquery"  
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
        }),
        new CleanWebpackPlugin(
            ['dist/app/main.*.js','dist/app/manifest.*.js',],  //匹配删除的文件
            {
                root: __dirname,                 //根目录
                verbose:  true,                  //开启在控制台输出信息
                dry:      false                  //启用删除文件
        })
    ]
}

执行打包命令

npm run publish

准备一个javaWeb项目

  • index.html放入web-inf文件夹中
  • static目录放在webapp中
  • 写一个转发的方法转发到index.html
private static final String Index = "index";
 
@RequestMapping(value = {"","index"},method = RequestMethod.GET)
public ModelAndView toIndex(){
    ModelAndView view = new ModelAndView(Index );
    return view;
 
}

个人菜逼,大牛勿喷

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章