8、打包多页应用

最新推荐文章于 2024-05-30 09:11:57 发布

2024路在何方

最新推荐文章于 2024-05-30 09:11:57 发布

阅读量514

点赞数

分类专栏：前端 webpack4.0 webpack学完这些就够了文章标签：多页应用多页应用打包 webpack 多入口 entry

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.csdn.net/qq_17175013/article/details/86751880

版权

前端同时被 3 个专栏收录

68 篇文章 4 订阅

订阅专栏

webpack4.0

32 篇文章 4 订阅

订阅专栏

webpack学完这些就够了

29 篇文章 48 订阅

订阅专栏

多页应用打包

首先，多页应用应该有多个js文件，那么新建如下：

   src------index.js
        |
        ----other.js
           
    //index.js
    console.log('home');
    //other.js
    console.log('other');

初始化这个项目

    npm init
    npm i webpack webpack-cli -D

新建并配置webpack.config.js
1. 多入口文件，那么entry就不能写成字符串形式，应该是一个对象
2. 出口，因为是多入口，所以出口也是多个，要配置成动态名字

    let path = require('path');
    module.exports = {
        entry:{
            home:'./index.js',
            other:'./other.js'
        },
        output:{
            filename:'[name]:[hash:8].js',
            path:path.resolve(__dirname,'./dist')
        }
        
    }

创建html文件

    node_modules
     |
    package.json
     |
    src------index.js
     |     |
     |      ----other.js
     |
    webpack.config.js
     |
    index.html

虽然是多个入口js，但是html创建只需要一个就可以了，然后更具多个入口js，打包生成多个html

既然是用到了html，那么就应该讲生成的js插入到html中，这时候应该用到html-webpack-plugin插件，并且配置webpack.config.js

//webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        home:'./index.js',
        other:'./other.js'
    },
    output:{
        filename:'[name]:[hash:8].js',
        path:path.resolve(__dirname,'./dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html'
        })
    ]
    
}

显然，这样是 不正确 的，因为我们的目的是将多个js分别打包成多个html，而上面的配置，将home.js和other.js都插入到了index.html中

由于是多个入口，根据插件要求，2个入口就要new两次HtmlWebpackPlugin，然后分别配置，我们来做如下改造：

//webpack.config.js
 let path = require('path');
 let HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
     entry:{
         home:'./index.js',
         other:'./other.js'
     },
     output:{
         filename:'[name]:[hash:8].js',
         path:path.resolve(__dirname,'./dist')
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./index.html',
             filename:'home.html',
             chunks:['home']//chunks代表代码块，也就是说，home.html中引入的对应js是entry为home的js，如果要引入other.js，那么这里就写['other']；如果两个都要，那么就写成['home','other']
         }),
         new HtmlWebpackPlugin({
             template:'./index.html',
             filename:'other.html',
             chunks:['other']
         })
     ]
     
 }

重点： chunks代表代码块，也就是说，home.html中引入的对应js是entry为home的js，如果要引入other.js，那么这里就写[‘other’]；如果两个都要，那么就写成[‘home’,‘other’]

打包编译

    npx webpack

这样就生成了dist文件夹，其目录：

    dist
      |
      -------home.645f610f.js
      |
      -------home.html
      |
      -------other.645f610f.js
      |
      -------other.html

其中home.html内容就是：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
<script type="text/javascript" src="home.645f610f.js"></script></body>
</html>

其中other.html内容就是:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
<script type="text/javascript" src="other.645f610f.js"></script></body>
</html>

可见，对应的js都打包到对应的html中了，这样就实现了多页应用的打包

2024路在何方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
8、打包多页应用

多页应用打包首先，多页应用应该有多个js文件，那么新建如下： src------index.js | ----other.js //index.js console.log('home'); //other.js console.log('other');初始化这个项目 npm in...
复制链接

扫一扫