1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中

2.将这些文件单独提取出来,在页面中使用<script></script>进行引入,commonChunkPlugin可以办到。利用commonChunkPlugin来配置多个<script></script>

引用时,可以如下配置:

new webpack.optimize.CommonChunkPlugin{

names :['vendor',' component ']

}

3.对于其他页面,为了引用这些打包出来的公共组件,可以利用HtmlWebpackPlugin来指定,如:

new HtmlWebpackPlugin({

chunks:[ 'vendor','components']

})

4.对于路由中的组件,我们一般都需要按需加载,使用require时会自动打包成chunk文件,在webpack.config.js进行配置

output:{

'chunkFilename' : '[name].[hash].js'

}

webpack的多文件打包问题的更多相关文章

  1. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  2. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  3. Webpack - 把json文件打包进js文件

    把html文件打包进index.js   1  新建文件 typings.d.ts    declare module "*.html" {   const content: st ...

  4. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  5. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  6. webpack配置:css文件打包、JS压缩打包和HTML文件发布

    一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

  7. 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口

    在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...

  8. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  9. Webpack多入口文件、热更新等体验

    Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...

随机推荐

  1. windows下搭建tensorflow的环境

    这年头,不会点人工智能和神经网络,都不好意思跟人打招呼了.之前搞了一下sklearn,今天觉得应该要了解一下google这个传说中的人工智能开源神器. 最近终于有时间了,凡事从hello world开 ...

  2. C++ 虚函数相关,从头到尾捋一遍

    众所周知,C++虚函数是一大难点,也是面试过程中必考部分.此次,从虚函数的相关概念.虚函数表.纯虚函数.再到虚继承等等跟虚函数相关部分,做一个比较细致的整理和复习. 虚函数 OOP的核心思想是多态性( ...

  3. DC平衡双向控制串行器 转接IC GM8913:LVTTL转FPD-LINK III芯片

    1 概述     GM8913型DC平衡双向控制串行器,其主要功能是实现将10或12位并行控制信号和一路时钟信号串行为一路2.8Gbps高速串行数据:同时接收低速通道信号实现模式配对的功能.芯片内部集 ...

  4. CF #404 (Div. 2) D. Anton and School - 2 (数论+范德蒙恒等式)

    题意:给你一个由'('和')'组成的字符串,问你有多少个子串,前半部分是由'('组成后半部分由')'组成 思路:枚举这个字符串中的所有'('左括号,它左边的所有'('左括号的个数为num1,它的右边的 ...

  5. 浏览器访问php脚本通过sendmail用mail函数发送邮件

    前几天做项目遇到这样的一个问题:当某一个结点下有新的文章发表的时候,以邮件的形式通知该结点下的所有用户.这就需要用到邮件发送的功能. 因为项目是php语言做的,所以最简单的方法就是使用php自带的函数 ...

  6. jquery 基础变量定义

    var $i=$("#D1"); var i=$("#D2"); function(){      //这里获取控件对象值      var d1=$i.val ...

  7. 如何使用CocoaPods

    如何使用CocoaPods 1.进入主目录下 cd /Users/HYYT/Desktop/支付功能/微信支付宝集成/支付宝微信支付集成 2.建立Podfile(配置文件) 2.1  输入:vim P ...

  8. angularjs实现首页轮播图

    <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <met ...

  9. 树状数组 && 线段树

    树状数组 支持单点修改 #include <cstdio> using namespace std; int n, m; ], c[]; int lowbit(int x) { retur ...

  10. js创建xml对象

    js创建xml对象 //创建对象 function getDataXML() {     var objTds = $("TEXTAREA");     var count = o ...