webpack打包專案實戰。看我怎麼分專案管理
阿新 • • 發佈:2019-02-20
最近在處理本部落格的打包事項。第一次打包appJs飆升到3M左右,按照阿里雲的小細水管,大約流淌了10分鐘左右。終於流淌進我的瀏覽器。當時我的心在抽搐。今天我們就從這裡說起
單獨打包css 和 font資訊
打包css
new ExtractTextPlugin("static/css/styles.css"),
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
},
打包字型
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192&name=./static/img/[name].[ext]'
},
{
test: /\.(ttf|woff|svg|eot|woff2)$/,
loader:'url-loader?limit=8192&name=./static/font/[name].[ext]'
}
拆分第三方包
entry: {
app:path.resolve(__dirname,'src/main.js'),
vue:['vue' ,'vuex','vue-resource'],
element:['element-ui'],
mEditor:['mavon-editor']
},
new webpack.optimize.CommonsChunkPlugin({
name: ['vue','element','mEditor'],
filename: 'static/js/vendor.[name].js',
chunks: 4
}),
vue 要求我們按需載入(非同步) 我們更改引入法則
import Vue from 'vue'
import VueRouter from "vue-router"
Vue.use(VueRouter)
/*非同步載入法則*/
const Login = resolve => require.ensure([],()=> resolve(require('../components/Login/Login.vue')),'Login');
我們看看效果吧
雖然還是有點大,但是比起3m兼職想哭。配合CDN加速估計2秒開啟。這個時間我覺得可以接受
附:打包檔案
const webpack=require("webpack");
const path = require('path');
const node_modules = path.resolve(__dirname, 'node_modules');
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlwebpackPlugin=require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app:path.resolve(__dirname,'src/main.js'),
vue:['vue','vuex','vue-resource'],
element:['element-ui'],
mEditor:['mavon-editor']
},
output: {
path: path.resolve(__dirname, 'dist/app'),
filename: 'static/js/app_[name].js',
},
module: {
loaders: [
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
query: {
presets: ['es2015']
}
},
{
test:/\.less$/,
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
},
{
test:/\.scss$/,
loader:'style-loader!css-loader!autoprefixer-loader!sass-loader'
},
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192&name=./static/img/[name].[ext]'
},
{
test: /\.(ttf|woff|svg|eot|woff2)$/,
loader:'url-loader?limit=8192&name=./static/font/[name].[ext]'
}
]
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
name: ['vue','element','mEditor'],
filename: 'static/js/vendor.[name].js',
chunks: 4
}),
new UglifyJsPlugin({
compress:{
warnings:false
}
}),
new ExtractTextPlugin("static/css/styles.css"),
new HtmlwebpackPlugin({
title: 'index', //生成的頁面標題
filename: 'index.html', //生成的檔名稱
template: 'index.html' //根據index1.html這個模板來生成
}),
new CleanWebpackPlugin(
['dist/app/'], //匹配刪除的檔案
{
root: __dirname, //根目錄
verbose: true, //開啟在控制檯輸出資訊
dry: false //啟用刪除檔案
})
]
}