webpack配置提取公共代码

公共代码提取功能是针对多入口文件的;

  背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js

  webpack.config.js文件:

 1 var path = require(‘path‘)
 2 module.exports = {
 3     entry:{
 4         pageA:‘./src/pageA.js‘,
 5         pageB:‘./src/pageB.js‘
 6     },
 7     output: {
 8         filename: "[name].js",
 9         path:path.resolve(__dirname,‘./dist‘)
10     },
11     optimization: {
12         splitChunks:{
13             cacheGroups: {
14                 vender:{
15                     test:/node_modules/,
16                     chunks:‘initial‘,
17                     name:‘vender‘,
18                     priority:10
19                 },
20                 utils:{
21                     chunks:‘initial‘,
22                     name:‘utils‘,
23                     minSize:0
24                 }
25             }
26         }
27     }
28 }

原文地址:https://www.cnblogs.com/yangguoe/p/9882266.html

时间: 2024-09-30 20:55:09

webpack配置提取公共代码的相关文章

The way of Webpack learning (II.) -- Extract common code(多页面提取公共代码)

学习之路基于webpack3.10.0,webpack4.0之后更新. 多页面提取公共代码!!! 一:文件关系 pageA --> subA.subB --> moduleA pageB --> subA.subB --> moduleA 那么pageA.pageB 的公共代码就是subA.subB .moduleA. 二:webpack.config.js文件配置 var webpack = require('webpack') var path = require('path'

基于webpack实现多html页面开发框架六 提取公共代码

一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览器下载一次后会缓存下来,不会重复下载 二.未抽取公共代码的状况 基于之前代码,测试如下: 1.在assets/js文件夹下新建common.js,输入如下代码: 1 export function printCommon(){ 2 console.log("common"); 3 } 2.

webpack提取公共代码。

webpack.optimize.CommonsChunkPlugin这个是内置方法到时候new就行了. 首先创 var webpack=require('webpack') var path=require('path') module.exports={ entry:{ 'pageA':'./src/pageA', 'pageB':'./src/pageB', 'vendor':['lodash'] }, output:{ path:path.resolve(__dirname, './di

抽取公共代码

如果要彻底明白 Webpack V4 版本如何抽取公共代码,就要设计一个场景来支持抽取公共代码的多种形式,能够从代码运行的结果中查看实际的效果,从效果中深入理解各个参数的作用. 场景设计 在设计场景之前,首先要明白公共代码抽取常见的几种情况: 抽取 Webpack 运行时代码 直接加载的代码抽取(静态引入) node_modules 中的代码 项目中的业务代码 按需加载的代码抽取(动态引入) node_modules 中的代码 项目中的业务代码 经过分析会发现,现在常见的场景就五种,设计一个应用

3.webpack配置

1.项目目录 2.配置代码const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');const webpack = require('webpack');module.exports = { entry: './src/app.jsx', output:

vue-cli中webpack配置解析

版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

webpack配置这一篇就够

最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/42e11515c10f git项目地址:https://github.com/gengchen528/webpackSample 更多前端内容可以到:http://www.bloggeng.com/ 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的

vue-cli#2.0 webpack 配置分析

目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └

[F2016061802] NodeJS之旅-使用webpack构建项目时代码正确但编译出错

遇到这个问题前,我对webpack还不算太熟,仅仅限于用它来编译ES6代码,代码写多了,问题也就来了. 一开始用NodeJS写些小项目,用的模块并不多,遇到些报错问题,改改也就通过了.然而,随着用的第三方模块增多,用webpack构建项目时出现错误的次数越来越多,最奇怪的是:代码检查了十几遍,明明任何错误都没有,编译却通不过.最后只能硬着头皮去看编译后的代码才明白问题出在哪里! 对于webpack,它是自动把依赖都输出到目标文件中.比如: import koa from 'koa' 构建后的输出