【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 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
88 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
149 2
|
22天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
40 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
25天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
21天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
25天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
29 6
|
21天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
30天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
66 3