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


Posted in Javascript onDecember 18, 2017

下面看下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文件及部署的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
react+redux的升级版todoList的实现
Dec 18 #Javascript
总结js中的一些兼容性易错的问题
Dec 18 #Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 #Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
详解如何使用 vue-cli 开发多页应用
Dec 16 #Javascript
详解VUE 数组更新
Dec 16 #Javascript
详解如何用模块化的方式写vuejs
Dec 16 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP图片水印类的封装
2017/07/06 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
招商专员岗位职责
2014/02/08 职场文书
倡议书作文
2015/01/19 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL