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'

}

转载于:https://www.cnblogs.com/kewenlei/p/6874909.html

webpack的多文件打包问题相关推荐

webpack对css文件打包：css-loader和style-loader版本过高问题
webpack对css文件打包:css-loader和style-loader版本过高问题问题描述安装css-loader:npm install --save-dev css-loader和st ...
【JavaScript】 Webpack安装及文件打包
背景最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...
webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 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处理iconfont字体文件打包
首先你要先会用iconfont 如果还不会建议观看我的文章 iconfont创建前端图标库先在我们的文件夹里建一个项目 npm init 根据提示操作就会生成一个package.json 我们现在 ...
webpack如何将css文件分离的,详解webpack分离css单独打包
这篇文章只写了如何把css打包成一个css文件,没有讲解如何打包成多个css文件,经简友提点,这里添加上了打包成多个css文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, css, ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...

webpack的多文件打包问题

webpack的多文件打包问题相关推荐

最新文章

热门文章