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 相关文章推荐
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
vue路由跳转传参数的方法
May 06 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery技巧总结
2011/01/01 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
毕业自我评价
2014/02/05 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python