【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;
 
}

个人菜逼,大牛勿喷

相关文章
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
28 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
3月前
|
Java 关系型数据库 MySQL
Windows用Tomcat发布Java项目
对于云服务器,程序员一般不会陌生,如果项目需要发布到现网,那么服务器是必不可缺的一项硬性条件,那么如何在云服务器上部署一个项目,需要做哪些配置准备,下面就由本文档为大家讲解,本篇以Tomcat服务器发布J2EE项目为例。
49 0
Windows用Tomcat发布Java项目
|
2月前
|
JavaScript Java 应用服务中间件
centos部署vue项目(java,tomcat环境的搭建)
centos部署vue项目(java,tomcat环境的搭建)
42 0
|
2月前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
514 0
|
7天前
|
运维 Java 应用服务中间件
Tomcat详解(六)——Tomcat运行模式调优
Tomcat详解(六)——Tomcat运行模式调优
9 3
|
2月前
|
Java 应用服务中间件 程序员
互联网大厂为什么禁止SpringBoot项目使用Tomcat?
在SpringBoot框架中,我们使用最多的是Tomcat,这是SpringBoot默认的容器技术,而且是内嵌式的Tomcat。
50 1
互联网大厂为什么禁止SpringBoot项目使用Tomcat?
|
2月前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
3月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
19 0