webpack打包js文件的示例分析

小編給大家分享一下webpack打包js文件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)整合營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式重慶網(wǎng)站建設(shè)公司、成都做手機(jī)網(wǎng)站、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為圍欄護(hù)欄行業(yè)客戶提供了網(wǎng)站開發(fā)服務(wù)。

下面看下webpack打包js文件的實(shí)現(xiàn)代碼

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
// 每次打包之前，自動(dòng)刪除文件夾
const cleanWebpackPlugin = require('clean-webpack-plugin')
// 分離 css 到獨(dú)立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 壓縮 css 資源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
// 入口
entry: {
// 項(xiàng)目代碼入口
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'),
// 設(shè)置公共路徑
publicPath: '/',
// 此處的name由 entry 中的屬性名決定
// chunk 表示一個(gè)代碼塊（webpack模塊化分析代碼后的結(jié)構(gòu)）
filename: 'js/[name].[chunkhash].js',
// ------添加 chunkFilename, 指定輸出js文件的名稱------
chunkFilename: 'js/[name].[chunkhash].js',
},
// 配置loader，處理不同的靜態(tài)資源
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] 使用圖片的默認(rèn)后綴
// name: '[name].[ext]'
// images/ 表示圖片生成后存放的路徑
name: 'images/[hash:10].[ext]'
}
}
},
{
// 參考上面圖片的配置，進(jìn)行配置即可
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 定位錯(cuò)誤的
// 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
}
}),
// 自動(dòng)刪除dist目錄
// 參數(shù)：表示要?jiǎng)h除文件的路徑，可以是多個(gè)
new cleanWebpackPlugin(['./dist']),
// 分離第三方包（公共包文件）
new webpack.optimize.CommonsChunkPlugin({
// 第三方包入口名稱，對應(yīng) entry 中的 vendor 屬性
// 將 entry 中指定的 ['vue', 'vue-router', 'vue-resource'] 打包到名為 vendor 的js文件中
name: 'vendor',
}),
// 壓縮js代碼
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
// 壓縮
compress: {
// 移除警告
warnings: false
}
}),
// 指定環(huán)境，設(shè)置為生產(chǎn)環(huán)境
// 開發(fā)期間我們使用vue的為壓縮版本，項(xiàng)目上下了，只需要將環(huán)境修改為
// 生產(chǎn)環(huán)境，那么，vue就會自動(dòng)變?yōu)?nbsp;壓縮版本
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
// 通過插件抽離 css (參數(shù))
// 參數(shù)：表示將抽離的css文件生成到哪個(gè)目錄中
new ExtractTextPlugin("css/style.css"),
// 壓縮抽離之后的css
new OptimizeCssAssetsPlugin(),
// 啟用 scope hoisting
new webpack.optimize.ModuleConcatenationPlugin()
]
}

下面給大家介紹下webpack打包后的JS文件如何部署？

webpack打包后的JS文件，怎樣發(fā)布到生產(chǎn)環(huán)境使用？能發(fā)布到TOMCAT嗎？還是需要其它的部署環(huán)境？

打包出來的文件你把它當(dāng)成普通的js文件就好了，最不濟(jì)，你復(fù)制到想放的目錄在頁面中引用，jquery.min,js怎么用，webpack打包出來的js文件你也怎么用。

以上是“webpack打包js文件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：webpack打包js文件的示例分析
分享地址：http://bm7419.com/article42/psopec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、Google、、網(wǎng)站排名、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)