最近在處理本部落格的打包事項。第一次打包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        　　　　　　　　　　//啟用刪除檔案
        })
    ]
}