webpack

来源：互联网发布：知柏地黄丸口腔溃疡编辑：程序博客网时间：2024/06/01 09:45

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-reasonsHash: ef1b55065f0a3523bcb2Version: webpack 3.8.1Time: 529ms                       Asset       Size  Chunks             Chunk Namesmain-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-plugin@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-plugin/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内容如下，大功告成啦！
这里写图片描述

阅读全文

0 0