240
【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;
}
个人菜逼，大牛勿喷
最后更新：2017-09-10 22:04:08