html如何打包文件发送,手把手教你webpack如何打包才能输出最优生产文件

前言

webpack打包大多数前端工程师们都已经用过，然后今天我想和大家分享的是webpack如何打包才能输出最优生产环境文件，主要针对两种人群：未自己手把手配置过webpack的人、配置过webpack但是不熟悉或者不知所以然的的人。如果fe大神看到请勿略此文，谢谢！

准备工作

在做讲解之前，我希望大家先去我的github上clone下我的demo项目，然后按照我的讲解亲自code一边！

最基本的打包构建

这是项目目录结构：

ps：先来看下最简单的打包，这边为了模拟打包文件大点，index.js引入了一些用不到的模块，然后webpack只做了最简单的js压缩处理。

//index.js

import React from 'react';

import { render } from 'react-dom';

import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import Redux from 'redux';

import reactRedux from 'react-redux';

import App from './app/App';

import antd from 'antd';

import 'antd/dist/antd.min.css';

import './assets/common.scss';

import './index.scss';

render(, document.getElementById("app"));

//webpack

....

plugins: [

new webpack.optimize.UglifyJsPlugin({

output: {

comments: false

},

compress: {

warnings: false

}

})]

在webpack刚出来的时候，大多数人使用webpack其实和用grunt、gulp一样，把项目中的引用到的模块、样式文件等都打包成一个js文件。这样做的缺点：项目越庞大，打包出来的js文件越大，打包时间越长，最关键的是在单页面应用当中，会很大程度加大首屏加载时间，用户体验不好

上图可以看出打包时间7s左右，一个app.js文件达到352kb。然后这边还不包括antd.min.css(大概400kb antd-ui框架样式)，你要想这仅仅是我这边只加了react开发需要用的一些基本模块，业务逻辑和业务css样式基本没有的情况下的数据。实际项目这个数据肯定还要来的大得多。

开始优化

首先我们考虑的是单个文件过大，拆分成多个打包。

css与js分离

把一个超大文件，先按js和css拆分成两个文件，然后页面并行加载这两文件肯定比加载一个文件来的快的，然后文件体积大小肯定也是有所缩小的。

extract-text-web