下面看下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]'
}
}
},
{
// 參考上面圖片的配置，進(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 定位錯誤的
// 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)?壓縮版本
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文件就好了，最不濟(jì)，你復(fù)制到想放的目錄在頁面中引用，jquery.min,js怎么用，webpack打包出來的js文件你也怎么用。
總結(jié)
以上所述是小編給大家介紹的webpack打包js文件及部署的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
