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. h5 做app时和原生交互的小常识。

    距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="t ...

  2. 【Flex】去除外边框,底背景透明,改变exe的icon

    一.去除程序外边框 1.在 xx-app.xml文件里,找到  <!-- <systemChrome></systemChrome> -->  这句话,然后删掉注释 ...

  3. swfobject.js加载swf,关于是否加加载完成;

    这几个帖子可以参考下 http://bbs.9ria.com/forum.php?mod=viewthread&page=1&tid=38913 http://bbs.9ria.com ...

  4. JS中的bind的实现以及使用

    在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write; altwrite("hello"); //1.以上代码有什么问题 // ...

  5. AngularJS1.X学习笔记3-内置模板指令

    前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lan ...

  6. 改变iOS app的icon(iOS10.3)

    改变iOS app的icon 官方 iOS10.3新增了可以让开发者去更改app的icon,接下来看看怎么更改. 官方API给的东西很少,只是介绍了一个实例方法: open func setAlter ...

  7. spring mvc mybatis集成踩的坑

    开园这么多年了也没写几篇文章,现在想想光看别人的也不行啊,咱也自己写写,就写这天我我在做spring mvc与mybatis的集成时遇到的问题 1 spring与mybatis的集成 这个相信大家都弄 ...

  8. xxxxxxxxxxxxxx

    一.Linux命令的分类 1.内部命令:属于Shell解释器的一部分 2.外部命令:独立于Shell解释器之外的程序 3.type命令,查看命令是外部命令还是内部命令: [root@www ~]# t ...

  9. yii2 advance安装

    转载自:http://www.genshuixue.com/i-cxy/p/7986531 1. 前提条件,php版本得> 5.4D:\phpStudy>php -v PHP 5.5.17 ...

  10. C#网络程序设计(1)网络编程常识与C#常用特性

        网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...