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