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 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
js实现随机点名程序
Sep 17 Javascript
javascript设计模式之迭代器模式
Jan 30 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
我用php+mysql写的留言本
2006/10/09 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
Javascript倒计时代码
2010/08/12 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
python shell根据ip获取主机名代码示例
2017/11/25 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
详解小白之KMP算法及python实现
2019/04/04 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
centos7之Python3.74安装教程
2019/08/15 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python开发入门——列表生成式
2020/09/03 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
公司企业表扬信
2014/01/11 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
黄金搭档广告词
2014/03/21 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android