webpack打包js文件及部署的实现方法
下面看下webpack打包js文件的实现代码
constpath=require('path')
constwebpack=require('webpack')
consthtmlWebpackPlugin=require('html-webpack-plugin')
//每次打包之前，自动删除文件夹
constcleanWebpackPlugin=require('clean-webpack-plugin')
//分离css到独立的文件中
constExtractTextPlugin=require("extract-text-webpack-plugin");
//压缩css资源文件
constOptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin')
module.exports={
//入口
entry:{
//项目代码入口
app:path.join(__dirname,'./src/js/main.js'),
//第三方包入口
vendor:['vue','vue-router','vue-resource','vuex','moment','mint-ui','vue-preview']
},
//出口
output:{
path:path.join(__dirname,'./dist'),
//设置公共路径
publicPath:'/',
//此处的name由entry中的属性名决定
//chunk表示一个代码块（webpack模块化分析代码后的结构）
filename:'js/[name].[chunkhash].js',
//------添加chunkFilename,指定输出js文件的名称------
chunkFilename:'js/[name].[chunkhash].js',
},
//配置loader，处理不同的静态资源
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
{
test:/\.css$/,
//抽离和压缩css
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
},
{
test:/\.(sass|scss)$/,
//抽离和压缩scss
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:['css-loader','sass-loader']
})
},
{
test:/\.(png|jpg|jpeg|gif|bmp|webp)$/,use:{
loader:'url-loader',
options:{
limit:6518,
//name:'images/imgs-[hash:7].[ext]'
//[name]使用图片的名称作为最终生成的文件名称
//[ext]使用图片的默认后缀
//name:'[name].[ext]'
//images/表示图片生成后存放的路径
name:'images/[hash:10].[ext]'
}
}
},
{
//参考上面图片的配置，进行配置即可
test:/\.(ttf|woff|woff2|svg|eot)$/,
use:{
loader:'url-loader',
options:{
limit:2048,
name:'fonts/[hash:10].[ext]'
}
}
},
{test:/\.vue$/,use:'vue-loader'},
]
},
//source-map定位错误的
//devtool:'cheap-module-source-map',
//配置htmlWebpackPlugin
plugins:[
newhtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html',
//压缩HTML
minify:{
//移除空白
collapseWhitespace:true,
//移除注释
removeComments:true,
//移除属性中的双引号
removeAttributeQuotes:true
}
}),
//自动删除dist目录
//参数：表示要删除文件的路径，可以是多个
newcleanWebpackPlugin(['./dist']),
//分离第三方包（公共包文件）
newwebpack.optimize.CommonsChunkPlugin({
//第三方包入口名称，对应entry中的vendor属性
//将entry中指定的['vue','vue-router','vue-resource']打包到名为vendor的js文件中
name:'vendor',
}),
//压缩js代码
newwebpack.optimize.UglifyJsPlugin({
sourceMap:true,
//压缩
compress:{
//移除警告
warnings:false
}
}),
//指定环境，设置为生产环境
//开发期间我们使用vue的为压缩版本，项目上下了，只需要将环境修改为
//生产环境，那么，vue就会自动变为压缩版本
newwebpack.DefinePlugin({
'process.env':{
'NODE_ENV':JSON.stringify('production')
}
}),
//通过插件抽离css(参数)
//参数：表示将抽离的css文件生成到哪个目录中
newExtractTextPlugin("css/style.css"),
//压缩抽离之后的css
newOptimizeCssAssetsPlugin(),
//启用scopehoisting
newwebpack.optimize.ModuleConcatenationPlugin()
]
}
下面给大家介绍下webpack打包后的JS文件如何部署？
webpack打包后的JS文件，怎样发布到生产环境使用？能发布到TOMCAT吗？还是需要其它的部署环境？
打包出来的文件你把它当成普通的js文件就好了，最不济，你复制到想放的目录在页面中引用，jquery.min,js怎么用，webpack打包出来的js文件你也怎么用。
总结
以上所述是小编给大家介绍的webpack打包js文件及部署的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！