webpack打包js文件的示例分析

小編給大家分享一下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文件的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！