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压缩工具下载集合
Mar 06 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JS中Array数组学习总结
Jan 18 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
记录Python脚本的运行日志的方法
2019/06/05 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
实习协议书范本
2014/04/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
工作调动申请报告
2015/05/18 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Python装饰器详细介绍
2022/03/25 Python
MySQL存储过程及语法详解
2022/08/05 MySQL