webpack打包项目实战。看我怎么分项目管理

最近在处理本博客的打包事项。第一次打包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        　　　　　　　　　　//启用删除文件
        })
    ]
}

文章来自:九零码农