GVKun编程网logo

webpack(4)配置打包多个html（webpack打包多个页面）

16

在这篇文章中，我们将为您详细介绍webpack(4)配置打包多个html的内容，并且讨论关于webpack打包多个页面的相关问题。此外，我们还会涉及一些关于vuewebpack配置打包独立js文件、v

在这篇文章中，我们将为您详细介绍webpack(4)配置打包多个html的内容，并且讨论关于webpack打包多个页面的相关问题。此外，我们还会涉及一些关于vue webpack配置打包独立js文件、vue 项目中运用 webpack 动态配置打包多种环境域名、Vue.js中用webpack合并打包多个组件并实现按需加载、webpack 3 零基础入门教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin的知识，以帮助您更全面地了解这个主题。

本文目录一览：

webpack(4)配置打包多个html（webpack打包多个页面）

webpack(4)配置打包多个html（webpack打包多个页面）

现有文件：src/index.html，src/cart.html，src/js/jquery.js，src/js/common.js，src/js/index.js，src/js/cart.js。

要求：将jquery.js和common.js打包在一起生成一个chunk，作为通用库，index.html和cart.html都需要引用这个打包出来的通用库

index.js和cart.js分别打包生成自己的chunk

index.html中还要引入index.js打包后的chunk，cart中还要引入cart.js打包后的chunk

webpack.config.js文件：

const{resolve}=require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={     entry:{         vender:['./src/js/jquery.js','./src/js/common.js'],         index:'./src/js/index.js',         cart:'./src/js/cart.js'     },     output:{         path:resolve(__dirname,'build'),         filename:'[name].js'     },     mode:'development',     module:{         rules:[]     },     plugins:[//这里需要打包两个html，所以有两个HtmlWebpackPlugin对象各自进行配置         new HtmlWebpackPlugin({             template:'./src/index.html',             filename:'index.html',             chunks:['vender','index']//配置html需要引入的chunk         }),         new HtmlWebpackPlugin({             template:'./src/cart.html',             filename:'cart.html',             chunks:['vender','cart']//配置html需要引入的chunk         }),     ] }

vue webpack配置打包独立js文件

vue webpack配置打包独立js文件

独立打包js文件，方便发布后快捷修改

  • 经过网络搜索后，有以下几个方案

    • 配置独立entry
      倒是有单独打包了，不过被压缩了

    • webpack不混淆、不压缩指定js文件
      通过配置 loader 确实实现了js文件的独立打包，但是，在文件里直接import或者require返回的都是路径

    • 来自segmentfault的回答
      通过public/index文件全局挂载

    • 来自知乎的回答
      挂载到window上，跟上面的回答没有太大区别

    总而言之，就是要实现 runtime 有效

  • 个人倾向于external的用法
    在public/index.html通过script标签注入js，然后在webpack的配置里配置externals: {<项目内引用的名字>: <环境中变量的名字>}即可

vue 项目中运用 webpack 动态配置打包多种环境域名

vue 项目中运用 webpack 动态配置打包多种环境域名

 　　在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个 vue 项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。（欢迎纠错，谢谢。）

1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。

2. 修改 package.json 里的 script 命令：

　　配置了 test（测试），ready（预发布），prod（正式）三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自己需求，配置更多的命令，参数自定。网上看到有人去修改 NODE_ENV 这个默认的参数，配置文件里有很多地方都引用了这个参数。本人认为这个默认参数可以不改，自己重新增加一个参数就行（这里增加一个 BUILD_ENV 参数）。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "npm run build:prod",
    "build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js",
    "build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js",
    "build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"
  },

 

3. 修改 config 目录下的 prod.env.js

里面的默认配置是这样：只有一个 NODE_ENV

''use strict''
 
module.exports = {
  NODE_ENV: ''"production"'',  
}

 

修改后的配置：

''use strict''
const BUILD_ENV = process.env.BUILD_ENV
let baseUrl 
switch (BUILD_ENV) {
  case ''test'':
    baseUrl = ''api.test.com''
    break;  
  case ''ready'':
    baseUrl = ''api.ready.com''
  break;
  case ''prod'':
    baseUrl = ''api.prod.com''
  break;
}
module.exports = {
  NODE_ENV: ''"production"'', 
  BUILD_ENV: ''"'' + BUILD_ENV + ''"'',
  baseUrl: ''"'' + baseUrl + ''"'',
}

　　修改的配置增加了 BUILD_ENV 和 baseUrl 两个属性，属性值记得拼接双引号，process.env.BUILD_ENV 就是命令行里输入的 BUILD_ENV 的值，再根据 BUILD_ENV 进行相应的判断。在项目里，就可以通过 process.env 拿到 prod.env.js 暴露出去的 3 个属性。比如接口文件，就需要 process.env.baseUrl 来动态修改不同环境域名。

　　

 

原文出处：https://www.cnblogs.com/c-ms/p/11073675.html

Vue.js中用webpack合并打包多个组件并实现按需加载

Vue.js中用webpack合并打包多个组件并实现按需加载

前言

随着移动设备的升级、网络速度的提高，用户对于web应用的要求越来越高，web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码，提出了模块化的概念来组织代码。webpack作为一种模块化打包工具，随着react的流行也越来越流行。

使用 Vue 开发项目时，如果要使用其单文件组件特性，必然要使用 webpack 或者 browserify 进行打包，对于大型应用，为了提升加载速度，可以使用 webpack 的 code split 功能进行分割打包，生成较小的模块并按需加载，这在 Vue 文档及 vue-router 文档中均有介绍：、。

webpack 的 code split 可以使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法，以 AMD 风格的 callback-require 语法为例——

全局注册 Async Component：

{ require(['./my-async-component'],resolve) } Vue.component('async-webpack-example',myAsyncComponent)

局部注册 Async Component，单文件组件中 script 块内容：

{ require(['./my-async-component'],resolve) }

// Vue 扩展实例选项，其他选项略
export default {
components: {
'async-webpack-example': myAsyncComponent
}
}

在使用 vue-router 时，为实现不同路由下的组件异步加载，在路由映射中可以使用同样的方式来设置路由项的 component 属性。

这里的 myAsyncComponent 被定义为一个工厂函数，在需要时才会以 Vue 或者 vue-router 定义的用于解析组件选项的 resolve 回调函数（是的，在 Vue 和 vue-router 中有两个不同的解析组件选项的函数）为参数执行 callback-require 函数（resolve 回调函数的参数是组件选项），这样，在执行打包脚本时，my-async-component.vue 文件会被单独打包成一个文件，并且仅当该组件被使用时才会加载。

当要求异步加载的组件较多时，将会生成更多的单个文件，对于前端性能而言，虽然每个文件更小了，但可能意味着更多的网络连接建立和关闭的开销，因此在前端优化的实践中，通常需要在文件数量和单个文件大小之间取得平衡。

本文介绍如何将多个组件合并打包成一个单独的文件，一方面可以减少代码块的数量，另一方面，如果合并打包的这些组件在不同地方多次重复使用，由于 Vue 的缓存机制，可以加快后续组件的加载速度，并且如果这些通用组件长时间不会变化（如 UI 相关的组件），打包生成的文件也长期不会变化，可以充分利用浏览器的缓存功能，实现前端加载速度的优化。

先上效果图，在使用 vue-router 的 SPA 应用中，将除根路由之外的路由项对应的 ComponentA、ComponentB、ComponentC 等三个组件合并打包成一个文件。初次加载页面时，从开发者工具的 Network 面板上可以看到，此时未加载包含 ComponentA、ComponentB、ComponentC 这三个组件的 0.a5a1bae6addad442ac82.js 文件，当点击 Page A 链接时，加载了该文件，然后再点击 Page B、Page C 链接时，没有重新加载该文件。

我们首先通过 vue-cli 命令行工具使用 webpack 项目模板创建一个包含 vue-router 的项目，在其 src/components 目录下创建一个 CommonComponents 目录，在该目录中创建 ComponentA、ComponentB、ComponentC 这三个组件。

同时在 CommonComponents 目录下创建 index.js，其内容如下：

rush:js;"> exports.ComponentA = require('./ComponentA') exports.ComponentB = require('./ComponentB') exports.ComponentC = require('./ComponentC')

这样，我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js，在使用 webpack 进行打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下，这里的 callback 回调函数的形式没有任何特殊要求。

rush:js;"> require(['component/CommonComponents'],function (CommonComponents) { // do whatever you want with CommonComponents })

component/CommonComponents 模块加载成功时，这里的回调函数中的 CommonComponents 参数将会是一个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。

在定义异步解析组件时，我们使用的是一个工厂函数 resolve => {require(['./my-async-component'],resolve)}，如果需要在路由配置文件中添加 component 属性为 ComponentA 组件的路由项，应该定义什么样的工厂函数呢？记住这里的 resolve 是一个用于解析组件选项的回调函数，其参数是所获取的组件选项，而上一段代码中的 CommonComponents 恰好是包含若干个组件选项的对象，因此我们可以将 CommonComponents 的子属性作为参数用于 resolve 调用，我们编写一个函数 getCommonComponent，用于根据组件名称返回获取相应的组件选项的工厂函数。

resolve => require(['components/CommonComponents'],components => resolve(components[componentName]))

在组件模板或者路由映射等使用其中某一个组件的地方，可以使用类似于 getCommonComponent('ComponentA') 这样的函数调用进行组件设置，在路由映射中的使用示例如下：

rush:js;"> routes: [ { path: '/',name: 'Hello',component: Hello },{ path: '/a',name: 'A',component: getCommonComponent('ComponentA') },{ path: '/b',name: 'B',component: getCommonComponent('ComponentB') },{ path: '/c',name: 'C',component: getCommonComponent('ComponentC') } ]

最终打包生成的文件列表如下图所示，其中的 0.a5a1bae6addad442ac82.js 包含了 ComponentA、ComponentB、ComponentC 这三个组件。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对小编的支持。

webpack 3 零基础入门教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin

webpack 3 零基础入门教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin

之前我们已经可以转化 js 文件了，但是一般来说，我们放在网页上的是 html 页面。

现在我们就把 html 和 js 还有 webpack 结合来玩玩。

很简单，只要把 js 文件引入到 html 中就好。

1. 创建 index.html

首先在 dist 目录下创建 index.html 文件，其内容如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Project</title> </head> <body> <script src="app.bundle.js"></script> </body> </html>

这样，你在服务器上把这个 index.html 和 app.bundle.js 放到网站根目录中，用 nginx 托管起来，就可以用了。

前端的项目不就是这样处理的吗？

但是，我一般不会这么做，我会用更好的方式来处理这个问题。

为什么呢？

因为 index.html 文件太死了，连 js 文件都写死了，有时候引用的 js 文件是动态变化的呢？

打个比方，类似下面这种例子：

<script src="app.bundle1.js"></script>
<script src="app.bundle2.js"></script> <script src="app.bundle3.js"></script>

而且还不确定有多少个。

还有一种情况，有时候为了更好的 cache 处理，文件名还带着 hash，例如下面这样：

main.9046fe2bf8166cbe16d7.js

这个 hash 是文件的 md5 值，随着文件的内容而变化，你总不能每变化一次，就改一下 index.html 文件吧？

效率太低！

下面我们要使用一个 webpack 的插件 html-webpack-plugin 来更好的处理这个问题。

2. html-webpack-plugin

webpack 吸引人的地方就是因为它有太多的插件，有时候一些需求，一个插件就搞定。

这么多插件，我们不可能全都学，全都用，要用也是找最好的，最常用的来玩，而且学了一个，其他的也差不多，掌握方法就好。

学习插件的第一步，是进入其主页，先把它的 readme 文档看看，至少知道它是干什么的，能解决什么问题，最后知道如何用就行了。

2.1 安装

先来安装，一条命令就好。

$ npm install html-webpack-plugin --save-dev

安装成功后，package.json 这个文件会多出一行 "html-webpack-plugin": "^2.30.1",，如下所示：

{
  "name": "hello-wepback", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack -d --watch", "prod": "webpack -p" }, "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^3.8.1" } }

2.2 使用

现在我们把之前的 dist/index.html 先删除掉，我们要用 html-webpack-plugin 这个插件来自动生成它。

把 webpack.config.js 文件改一下，如下所示：

var HtmlWebpackPlugin = require(''html-webpack-plugin''); module.exports = { entry: ''./src/app.js'', output: { path: __dirname + ''/dist'', filename: ''app.bundle.js'' }, plugins: [new HtmlWebpackPlugin()] };

最后，运行一下上文所说的 npm run dev 命令，你会发现在 dist 目录生成了 index.html文件，打开来看下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="app.bundle.js"></script></body> </html>

连标题 <title>Webpack App</title> 都自动生成了，如果这是固定的话，就不太灵活，但是 html-webpack-plugin 有选项来处理这个问题。

3. 更好的使用 html-webpack-plugin

要改变 title 很简单，上文提到 HtmlWebpackPlugin 这个方法可以传入很多参数的，下面这样就可以解决这个问题。

var HtmlWebpackPlugin = require(''html-webpack-plugin''); module.exports = { entry: ''./src/app.js'', output: { path: __dirname + ''/dist'', filename: ''app.bundle.js'' }, plugins: [new HtmlWebpackPlugin({ title: "hello world" })] };

再去看看新生成的 index.html 文件，是不是变化了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> <title>hello world</title> </head> <body> <script type="text/javascript" src="app.bundle.js"></script></body> </html>

只是改变了一点点东西，其实也没多大用处，有时候我们要让 index.html 根据我们的意愿来生成。就是说它的内容是我们自己定的。

这个就不得不提到 html-webpack-plugin 的 template 功能。

把 webpack.config.js 更改如下：

var HtmlWebpackPlugin = require(''html-webpack-plugin''); module.exports = { entry: ''./src/app.js'', output: { path: __dirname + ''/dist'', filename: ''app.bundle.js'' }, plugins: [new HtmlWebpackPlugin({ template: ''./src/index.html'', })] };

接着新建 src/index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> </body> </html>

我们再来看看新生成的 dist/index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <script type="text/javascript" src="app.bundle.js"></script></body> </html>

下面我再来介绍几个参数，以及它的结果。

filename: ''index.html'' 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。

    minify: {
      collapseWhitespace: true,
    },

这个可以把生成的 index.html 文件的内容的没用空格去掉，减少空间。

效果如下：

 

 

 

hash: true 为了更好的 cache，可以在文件名后加个 hash。（这点不明白的先跳过）

效果如下：

 

 

 

最后的 webpack.config.js 内容大约是下面这样的：

var HtmlWebpackPlugin = require(''html-webpack-plugin''); module.exports = { entry: ''./src/app.js'', output: { path: __dirname + ''/dist'', filename: ''app.bundle.js'' }, plugins: [new HtmlWebpackPlugin({ template: ''./src/index.html'', filename: ''index.html'', minify: { collapseWhitespace: true, }, hash: true, })] };

html-webpack-plugin 肯定还有更多的用法和选项，这个只能根据需要慢慢探究了。

关于webpack(4)配置打包多个html和webpack打包多个页面的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于vue webpack配置打包独立js文件、vue 项目中运用 webpack 动态配置打包多种环境域名、Vue.js中用webpack合并打包多个组件并实现按需加载、webpack 3 零基础入门教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin的相关知识，请在本站寻找。

本文标签：

上一篇webpack高级概念，eslint配置（系列十六)（webpack eslint配置）

下一篇Webpack安装配置及打包详细过程（webpack打包及部署）

相关文章