### 目录结构如下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目录文件
|   |--- node_modules                       # 所有的依赖包
|   |--- js                                 # 存放所有js文件
|   | |-- demo1.js
|   | |-- main.js                           # js入口文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- webpack.dll.config.js              # 打包第三方依赖的库文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放所有的css样式文件
|   | |-- main.styl                         # main.styl文件
|   | |-- index.styl
|   |--- .gitignore
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel转码文件

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');module.exports = {// 入口文件
  entry: {// 项目中用到该两个依赖库文件jquery: ['jquery'],echarts: ['echarts']},// 输出文件
  output: {// 文件名称filename: '[name].dll.js', // 将输出的文件放到dist目录下path: path.resolve(__dirname, 'dist'),/*存放相关的dll文件的全局变量名称，比如对于jquery来说的话就是 _dll_jquery, 在前面加 _dll是为了防止全局变量冲突。*/library: '_dll_[name]'},plugins: [// 使用插件 DllPluginnew DllPlugin({/*该插件的name属性值需要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。比如在jquery.manifest文件中有 name: '_dll_jquery'*/name: '_dll_[name]',/* 生成manifest文件输出的位置和文件名称 */path: path.join(__dirname, 'dist', '[name].manifest.json')})]
};

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {plugins: [// 告诉webpack使用了哪些第三方库代码new DllReferencePlugin({// jquery 映射到json文件上去manifest: require('./dist/jquery.manifest.json')}),new DllReferencePlugin({// echarts 映射到json文件上去manifest: require('./dist/echarts.manifest.json')})]
}

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');// 清除dist目录下的文件
// const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');module.exports = {// 入口文件
  entry: {main: './js/main.js'},output: {filename: '[name].js',// 将输出的文件都放在dist目录下path: path.resolve(__dirname, 'dist')},module: {rules: [{// 使用正则去匹配test: /\.styl$/,use: ExtractTextPlugin.extract({fallback: {loader: 'style-loader'},use: [{loader: 'css-loader',options: {}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: [require('postcss-cssnext')(),require('cssnano')(),require('postcss-pxtorem')({rootValue: 16,unitPrecision: 5,propWhiteList: []}),require('postcss-sprites')()]}},{loader: 'stylus-loader',options: {}}]})},{test: /\.(png|jpg)$/,loader: 'url-loader',options: {limit: 10000,name: '[name].[ext]'}},{test: /\.js$/,exclude: path.resolve(__dirname, 'node_modules'), // 排除文件loader: 'babel-loader'}]},resolve: {extensions: ['*', '.js', '.json']},devtool: 'cheap-module-eval-source-map',devServer: {// contentBase: path.join(__dirname, "dist"),port: 8081,host: '0.0.0.0',headers: {'X-foo': '112233'},// hot: true,inline: true,// open: true,overlay: true,stats: 'errors-only'},plugins: [// new ClearWebpackPlugin(['dist']),new HtmlWebpackPlugin({template: './index.html' // 模版文件
    }),new ExtractTextPlugin({// 从js文件中提取出来的 .css文件的名称
      filename: `main.css`}),// 告诉webpack使用了哪些第三方库代码new DllReferencePlugin({// jquery 映射到json文件上去manifest: require('./dist/jquery.manifest.json')}),new DllReferencePlugin({// echarts 映射到json文件上去manifest: require('./dist/echarts.manifest.json')})]
};

webpack --config webpack.dll.config.js

"scripts": {"dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline","build": "webpack --progress --colors --devtool cheap-module-source-map","build:dll": "webpack --config webpack.dll.config.js"
},

var _dll_echarts = (function(modules) {// ... 此处省略 webpackBootstrap 函数代码
}([(function(module, exports, __webpack_require__) {// ID为0模块对应的代码
  }),(function(module, exports, __webpack_require__) {// ID为1模块对应的代码
  }),// ....... 很多模块代码
]));

{"name": "_dll_echarts","content": {"./node_modules/zrender/lib/core/util.js": {"id": 0,"meta": {}},"./node_modules/echarts/lib/echarts.js": {"id": 1,"meta": {}},"./node_modules/echarts/lib/util/graphic.js": {"id": 2,"meta": {}},// .....
  }
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body><div id="app">22222</div><div class="test1">12aaa</div><div class='test2'>vvvvv</div>
<script type="text/javascript" src="main.js"></script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body><div id="app">22222</div><div class="test1">12aaa</div><div class='test2'>vvvvv</div>
<script type="text/javascript" src="jquery.dll.js"></script>
<script type="text/javascript" src="main.js"></script></body>
</html>

require('../styles/main.styl');const $ = require('jquery');
$('#app').html('欢迎你来我的博客');console.log('这是main.js');
require('./demo1.js');

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './base/main';
import routerConfig from './router';
import store from './store';// 主题样式
import '../../components/common/common.styl';Vue.config.devtools = true;// Router
Vue.use(VueRouter);// Resource
Vue.use(VueResource);// 配置 resource
Vue.http.options.root = '';
Vue.http.options.emulateJSON = true;const router = routerConfig(VueRouter);new Vue(Vue.util.extend({router,store
}, App)).$mount('#app');

import Vue from 'vue';
import Vuex from 'vuex';import state from './state';
import mutations from './mutations';
import actions from './actions';Vue.use(Vuex);export default new Vuex.Store({state,mutations,actions
});

module.exports = {entry: {// 项目中用到该依赖库文件vendor: ['vue/dist/vue.esm.js', 'vue', 'vuex', 'vue-router', 'vue-resource']},plugins: [// 使用插件 DllPluginnew DllPlugin({/*该插件的name属性值需要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。比如在jquery.manifest文件中有 name: '_dll_jquery'*/name: '_dll_[name]',/* 生成manifest文件输出的位置和文件名称 */path: path.resolve(__dirname, paths.dist, '[name].manifest.json')})]
}

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');module.exports = {plugins: [// 告诉webpack使用了哪些第三方库代码new DllReferencePlugin({// jquery 映射到json文件上去manifest: require(path.resolve(__dirname, paths.dist, 'vendor.manifest.json'))}),]
}