webpack的多文件打包问题
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的多文件打包问题的更多相关文章
- 【JavaScript】 Webpack安装及文件打包
背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- Webpack - 把json文件打包进js文件
把html文件打包进index.js 1 新建文件 typings.d.ts declare module "*.html" { const content: st ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口
在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...
- Webpack - CommonJs & AMD 模块打包器
Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...
- Webpack多入口文件、热更新等体验
Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...
随机推荐
- XJOI1657&Codevs1255搭积木【树状动规】
搭积木 一种积木搭建方式,高为H的积木,最底层有M个积木,每一层的积木数是他的低一层的积木数+1或-1.总共有N个积木.(且每行积木数不超过10)比如上图N=13 H=6 M=2. 输入格式: 第一行 ...
- 【Egret】实现web页面操作PC端本地文件操作
Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...
- 记录一次raid数据恢复及回迁成功的案例
故障发生在两块盘组成的一个raid0上,其中的一块盘亮黄灯,被raid卡踢出后,raid崩溃,下面就把当时抢救数据的整个过程进行介绍. 由于硬盘是两块SAS 300G的硬盘,先把硬盘从机器中拔出来,然 ...
- [Python Web]部署完网站需要做的一些后续工作
简述 今天上线了一个简单的 Page,没有什么功能就是一个展示页. 但是,我发现部署完,上线后,还要弄不少东西.下面就是我记录.整理的一些上线网站基本都会用到的网站和配置. 加入统计代码 这个是必做的 ...
- HashMap源码详解(JDK7版本)
一.内部属性 内部属性源码: //内部数组的默认初始容量,作为hashmap的初始容量,是2的4次方,2的n次方的作用是减少hash冲突 static final int DEFAULT_INITIA ...
- react中,constructor和getInitialState的区别
1,ES6语法 使用class声明一个类,且要继承react组件的方法和属性的时候 : 在里面我们可以直接指定 this.state = { }, 我们可以当前组件内任何地方使用 this.setSt ...
- 服务器上的Git
前面的话 如果想与他人使用,除了使用Git来完成日常工作之外,还需要一个远程的Git仓库.尽管从技术上可以从个人的仓库里推送和拉取修改内容,但并不鼓励这样做,因为一不留心就很容易弄混其他人的进度.因此 ...
- 你不得不知的逻辑或(||)与(&&)非(!)
最近重新翻开原生JS,又得到很多不同的体会,虽然现在开发框架那么多,但很多思想都还是离不开原生的基础.今天呢,我就根据自己的学习总结一下逻辑与(&&)和(逻辑或(||)和逻辑非(!). ...
- 【C和指针】笔记1
数据 基本数据类型 整型家族:包含字符,短整型,整型和长整型 整型相互之间大小规定如下: 长整型至少和整型一样长,而整型至少应该和短整型一样长. short int至少16位,long int至少32 ...
- java获得路径的多种方式
本文讲解java语言中获得运行时路径的多种方式,包括java项目.java web项目.jar.weblogic等多种场景. 一.this.getClass().getClassLoader().ge ...