webpack - 自动化生成项目中的html页面(上)

最新推荐文章于 2021-03-26 20:38:20 发布

UIEngineer

最新推荐文章于 2021-03-26 20:38:20 发布

阅读量9.1k

点赞数 2

分类专栏： webpack 文章标签： html 自动化插件 plugins 终端

本文链接：https://blog.csdn.net/zjsfdx/article/details/78357837

版权

webpack 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.安装插件html-webpack-plugin
在终端输入命令如下：
cnpm install html-webpack-plugin –save-dev

2.进入webpack.config.js，加入一行代码，引用该插件，

var htmlWebpackPlugin = require('html-webpack-plugin');

同时写入plugins属性，对插件进行初始化

plugins:[
        new htmlWebpackPlugin()
 ]

webapack.config.js整个文件的代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin()
    ]
}

3.在终端输入cnpm run webpack，终端显示如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: ef1b55065f0a3523bcb2
Version: webpack 3.8.1
Time: 529ms
                       Asset       Size  Chunks             Chunk Names
main-634594a5e227fe8eda86.js     2.5 kB       0  [emitted]  main
   a-2dd37ebe6becb90deb4b.js    2.51 kB       1  [emitted]  a
                  index.html  273 bytes          [emitted]
   [0] ./src/script/main.js 23 bytes {0} [built]
   [1] ./src/script/a.js 31 bytes {1} [built]
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/lib/loader.js!./node_modules/_html-webpack-plugi
n@2.30.1@html-webpack-plugin/default_index.ejs 553 bytes {0} [built]
       [1] ./node_modules/_lodash@4.17.4@lodash/lodash.js 540 kB {0} [built]
           cjs require ../_lodash@4.17.4@lodash/lodash.js [0] ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plug
in/lib/loader.js!./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/default_index.ejs 1:8-53
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
           cjs require global [1] ./node_modules/_lodash@4.17.4@lodash/lodash.js 1:0-56
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
           cjs require module [1] ./node_modules/_lodash@4.17.4@lodash/lodash.js 1:0-56

其中有这么一句，Child html-webpack-plugin for "index.html":
表示生效了！进入dist/js文件夹，发现多了个index.html文件，index.html内容截图如下：

这里写图片描述
我们发现里面对我们的js文件进行了引用，而在这里我们却不需要自己手动填写类似
的打包后的文件

4.细心的小伙可能已经发现了，打包后虽然生成了一个index.html文件，但是该文件是在dist/js路径下，而根目录下却是我们一开始就建立的index.html文件，那么怎么才能在这2个文件之间，建立某种联系呢，进而符合我们的开发需求呢？？别怕，其实我们可以这样做。看第5.吧
这里写图片描述

5.对进入webpack.config.js文件，对html-webpack-plugin插件配置参数，代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            template:'index.html'   //传一个模板，就是根目录下的index.html
        })
    ]
}

但是这里有一个疑问，为什么template:'index.html'会指向根目录下的index.html呢，这里其实涉及到一个上下文的概念。在我们的配置里面会有一个
context这个属性，这个属性代表的意思就是整个运行环境的上下文，默认值就是运行这个脚本的目录，即根目录。

6.再次进入终端，输入命令运行,cnpm run webpack

7.首先我们看下原根目录下的index.html文件，源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

接着再来看下dist/js/index.html打包后的html文件，源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  <script type="text/javascript" src="main-634594a5e227fe8eda86.js"></script><script type="text/javascript" src="a-2dd37ebe6becb90deb4b.js"></script></body>
</html>

没错，打包后的文件就是原目录的index.html文件为模板建立的，，这样就建立起了打包后的文件和未打包文件之间的联系。但是这里还是有一个问题？所有生成的打包文件都在我们的dist/js目录下，其实这并不符合我们生产的实际要求。我们希望生成的打包文件index.html能够在js文件夹之外，首先我们想想为什么会发生这种事情，看下webpack.config.js文件你就明白啦，

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            template:'index.html'   //传一个模板，就是根目录下的index.html
        })
    ]
}

在webpack.config.js配置文件里面，打包后的文件路径为path:__dirname + '/dist/js',这也正是为什么所有打包后的文件都会在dist/js目录下的原因了，很简单啦，接下来改目录就可以了，老规矩，看第8.吧

8.修改webpack.config.js文件，修改后的文件代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包后的文件路径
        filename:'js/[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            template:'index.html'   //传一个模板，就是根目录下的index.html
        })
    ]
}

注意这2行代码：

path:__dirname + '/dist'

设置打包后的文件的输出路径在dist文件夹下，但是我们希望js文件仍旧能够在dist/js文件夹里面，因此我们修改成这样，

filename:'js/[name]-[chunkhash].js'

指定js目录

9.好了接下来是见证奇迹的时刻，在终端输入命令，

cnpm run webpack

10.看图说话，见我红色标注出来的没有啊，打包后的index.html位于dist文件夹下，而打包后的js文件依旧在dist/js文件夹下，这样正好符合我们的需求。
这里写图片描述

11.当然html-webpack-plugin这个插件，还可以配置别的参数，打开webpack.config.js文件，代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包后的文件路径
        filename:'js/[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            filename:'index-[hash].html',
            template:'index.html'   //传一个模板，就是根目录下的index.html
        })
    ]
}

filename:'index-[hash].html',

该行代码可以指定打包输出后的html文件的文件名是有文件名index+哈希值组成，看截图，对了，在这之前不要忘了再次打包哦，在终端输入cnpm run webpack，最后结果如下！
这里写图片描述

12.我们还可以设置打包后的文件是放在head标签中呢还是body标签中，
webpack.config.js文件修改代码如下：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{                             //打包入口文件
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },       
    output:{    
        path:__dirname + '/dist',    //打包后的文件路径
        filename:'js/[name]-[chunkhash].js'            //打包后的文件名
    },
    plugins:[
        new htmlWebpackPlugin({
            //注意传的参数是一个对象
            filename:'index-[hash].html',
            template:'index.html',   //传一个模板，就是根目录下的index.html
            inject:'head'
        })
    ]
}

在这里我们增加一行代码inject:'head' 表示我们将打包后的js文件放在head标签里，在终端输入cnpm run webpack，打包后查看dist下的html文件，html内容如下，大功告成啦！
这里写图片描述

UIEngineer

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack - 自动化生成项目中的html页面(上)

1.安装插件html-webpack-plugin 在终端输入命令如下： cnpm install html-webpack-plugin –save-dev2.进入webpack.config.js，加入一行代码，引用该插件，var htmlWebpackPlugin = require('html-webpack-plugin');同时写入plugins属性，对插件进行初始化plugins:
复制链接

扫一扫