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

在package.json里面是script加入脚本"publish": " webpack --config webpack.publish.config.js -p"

编写webpack.publish.config.jsconst 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;

}

转载自 我的博客-九零码农