webpack打包js文件的示例分析

发布时间:2021-08-02 10:38:54 作者:小新
来源:亿速云 阅读:151

小编给大家分享一下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文件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. webpack中打包结果的示例分析
  2. webpack打包速度优化的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

webpack

上一篇:如何使用ajax的post同步执行

下一篇:微信小程序开发之如何实现点击按钮退出小程序

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》