webpack打包js文件的示例分析-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比永泰網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式永泰網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋永泰地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

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

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'),
// 設(shè)置公共路徑
publicPath: '/',
// 此處的name由 entry 中的屬性名決定
// chunk 表示一個代碼塊（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]'
}
}
},
{
// 參考上面圖片的配置，進行配置即可
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目錄
// 參數(shù)：表示要刪除文件的路徑，可以是多個
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的為壓縮版本，項目上下了，只需要將環(huán)境修改為
// 生產(chǎn)環(huán)境，那么，vue就會自動變?yōu)?nbsp;壓縮版本
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
// 通過插件抽離 css (參數(shù))
// 參數(shù)：表示將抽離的css文件生成到哪個目錄中
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文件就好了，最不濟，你復(fù)制到想放的目錄在頁面中引用，jquery.min,js怎么用，webpack打包出來的js文件你也怎么用。

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：webpack打包js文件的示例分析-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article32/cosjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、面包屑導(dǎo)航、手機網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站維護、App開發(fā)

廣告

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

手機網(wǎng)站建設(shè)