webpack打包js文件及部署的实现方法

 更新时间:2017年12月18日 08:42:12   投稿:mrr  
这篇文章主要介绍了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以参考下

下面看下webpack打包js文件的实现代码

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
// 每次打包之前,自动删除文件夹
const cleanWebpackPlugin = require('clean-webpack-plugin')
// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = 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: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html',
// 压缩HTML
minify: {
// 移除空白
collapseWhitespace: true,
// 移除注释
removeComments: true,
// 移除属性中的双引号
removeAttributeQuotes: true
}
}),
// 自动删除dist目录
// 参数:表示要删除文件的路径,可以是多个
new cleanWebpackPlugin(['./dist']),
// 分离第三方包(公共包文件)
new webpack.optimize.CommonsChunkPlugin({
// 第三方包入口名称,对应 entry 中的 vendor 属性
// 将 entry 中指定的 ['vue', 'vue-router', 'vue-resource'] 打包到名为 vendor 的js文件中
name: 'vendor',
}),
// 压缩js代码
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
// 压缩
compress: {
// 移除警告
warnings: false
}
}),
// 指定环境,设置为生产环境
// 开发期间我们使用vue的为压缩版本,项目上下了,只需要将环境修改为
// 生产环境,那么,vue就会自动变为 压缩版本
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
// 通过插件抽离 css (参数)
// 参数:表示将抽离的css文件生成到哪个目录中
new ExtractTextPlugin("css/style.css"),
// 压缩抽离之后的css
new OptimizeCssAssetsPlugin(),
// 启用 scope hoisting
new webpack.optimize.ModuleConcatenationPlugin()
]
}

下面给大家介绍下webpack打包后的JS文件如何部署?

webpack打包后的JS文件,怎样发布到生产环境使用?能发布到TOMCAT吗?还是需要其它的部署环境?

打包出来的文件你把它当成普通的js文件就好了,最不济,你复制到想放的目录在页面中引用,jquery.min,js怎么用,webpack打包出来的js文件你也怎么用。

总结

以上所述是小编给大家介绍的webpack打包js文件及部署的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

    这篇文章主要给大家介绍了关于微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb的相关资料,文中通过示例代码介绍的非常详细,需要的朋友参考借鉴,下面随着小编来一起学习学习吧
    2018-07-07
  • JavaScript面向对象精要(上部)

    JavaScript面向对象精要(上部)

    这篇文章主要介绍了JavaScript面向对象精要,需要的朋友可以参考下
    2017-09-09
  • 深入浅析var,let,const的异同点

    深入浅析var,let,const的异同点

    这篇文章主要介绍了var,let,const异同点,文中较详细的给大家介绍了let和const的相同点和不同点,需要的朋友可以参考下
    2018-08-08
  • Bootstrap布局方式详解

    Bootstrap布局方式详解

    这篇文章主要为大家详细介绍了Bootstrap布局方式,分析了Bootstrap网格系统的各种特性,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 关于layui导航栏不展示下拉列表的解决方法

    关于layui导航栏不展示下拉列表的解决方法

    今天小编就为大家分享一篇关于layui导航栏不展示下拉列表的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript Event学习补遗 addEventSimple

    JavaScript Event学习补遗 addEventSimple

    这里有个addEventSimple和removeEventSimple函数,有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
    2010-02-02
  • JavaScript实现的拼图算法分析

    JavaScript实现的拼图算法分析

    这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下
    2019-02-02
  • js在HTML的三种引用方式详解

    js在HTML的三种引用方式详解

    这篇文章主要介绍了js在HTML的三种引用方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 微信小程序navigator跳转及参数传递的方法

    微信小程序navigator跳转及参数传递的方法

    这篇文章主要介绍了微信小程序navigator跳转及参数传递,在navigator中添加需要跳转的路径,如果需要带参,则在路径后面添加所要传递的参数以及值,需要的朋友可以参考下
    2023-11-11
  • Bootstrap作品展示站点实战项目2

    Bootstrap作品展示站点实战项目2

    这篇文章主要为大家分享了Bootstrap作品展示站点实战项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论