Webpack processing of html files-HTML Tutorial-php.cn

This article will share with you about webpack's processing of html files. The steps are very detailed. Friends in need can refer to

Why to process html File
All our methods are packaged under the dist folder, and our html is under the folder defined by ourselves. If we manually introduce the js in these dist folders one by one through src, then there are some It’s too unreliable

So the solution is:

Use webpack plug-in:HtmlWebpackPlugin

Step 1: Download

npm install --save-dev extract-text-webpack-plugin

Copy after login

Step 2: webpack.config.jsConfiguration

The configuration items of HtmlWebpackPlugin are:

##title{String} Title for the generated HTML documentfilename{String}The file to generate HTML for. You can specify the template file based on the directory template{String}inject{Boolean|String}Inject js resources into which part of the page. The values are: true \ 'head' \ 'body' \ false. When true or 'body' is passed, all JavaScript resources will be Placed at the bottom of the body element. 'head' places the script in the head element favicon{String}Adds the given icon path to the output HTMLhash{Boolean}If true will webpack append a unique compilation hash to all included scripts and CSS files. This is very useful for cache clearingchunks{?}Put in the resource module you need to importexcludeChunks{?}Do not put some of your resource modules

Name	Type	Description

Intended goal: me The project is a project with multiple entry files. I hope that each entry page will introduce the corresponding js module and css

For example, the login page will introduce the login js and css, and the index will introduce the corresponding js and css

webpack.config.jsThe configuration is as follows:

const path = require(&#39;path&#39;);const webpack = require(&#39;webpack&#39;)const ExtractTextPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);const configs = {
  entry:{    &#39;commom&#39;:[&#39;./src/page/common/index.js&#39;],    &#39;index&#39;:[&#39;./src/page/index/index.js&#39;],    &#39;login&#39;:[&#39;./src/page/login/index.js&#39;]
  },
  output:{
    path:path.resolve(__dirname, &#39;dist&#39;),
    filename:&#39;js/[name].js&#39;
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins:[    //独立通用模块
    new webpack.optimize.CommonsChunkPlugin({
      name : &#39;common&#39;,
      filename : &#39;js/base.js&#39;
    }),    //独立打包css
    new ExtractTextPlugin(&#39;css/[name].css&#39;),    //对html模板进行处理，生成对应的html,引入需要的资源模块
    new HtmlWebpackPlugin({
      template:&#39;./src/view/index.html&#39;,//模板文件
      filename:&#39;view/login/index.html&#39;,//目标文件
      chunks:[&#39;commom&#39;,&#39;login&#39;],//对应加载的资源
      inject:true,//资源加入到底部
      hash:true//加入版本号
    })
  ]
}
module.exports= configs

Copy after login

Then the packaging result is as follows

Webpack processing of html files

The generated target file:

Webpack processing of html files

Why process html files
All our methods are packaged under the dist folder, and our html is under the folder defined by ourselves. If we manually go to the src one by one Introducing the js in these dist folders is a bit too unreliable

So the solution is:

Use the webpack plug-in: HtmlWebpackPlugin

First step: Download

npm install --save-dev extract-text-webpack-plugin

Copy after login

Second step:

webpack.config.jsConfiguration

where HtmlWebpackPlugin Configuration items are:

NameTypeDescriptiontitle{String}Title for the generated HTML document##filenametemplateinjectfaviconhashchunksexcludeChunks

预期目标：我的项目是一个多入口文件的项目，希望每一个入口页面引入对应的js模块和css
比如login页面引入login的js和css、index引入对应js和css

webpack.config.js配置如下：

const path = require(&#39;path&#39;);const webpack = require(&#39;webpack&#39;)const ExtractTextPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);const configs = {
  entry:{    &#39;commom&#39;:[&#39;./src/page/common/index.js&#39;],    &#39;index&#39;:[&#39;./src/page/index/index.js&#39;],    &#39;login&#39;:[&#39;./src/page/login/index.js&#39;]
  },
  output:{
    path:path.resolve(__dirname, &#39;dist&#39;),
    filename:&#39;js/[name].js&#39;
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins:[    //独立通用模块
    new webpack.optimize.CommonsChunkPlugin({
      name : &#39;common&#39;,
      filename : &#39;js/base.js&#39;
    }),    //独立打包css
    new ExtractTextPlugin(&#39;css/[name].css&#39;),    //对html模板进行处理，生成对应的html,引入需要的资源模块
    new HtmlWebpackPlugin({
      template:&#39;./src/view/index.html&#39;,//模板文件
      filename:&#39;view/login/index.html&#39;,//目标文件
      chunks:[&#39;commom&#39;,&#39;login&#39;],//对应加载的资源
      inject:true,//资源加入到底部
      hash:true//加入版本号
    })
  ]
}
module.exports= configs

Copy after login

然后打包结果如下
Webpack processing of html files

其中生成的目标文件：
Webpack processing of html files



{String}	The file to generate HTML. You can specify the template file based on the directory
{String}
{Boolean\|String}	Inject js resources into which part of the page. The values are: true \ 'head' \ 'body' \ false. When true or 'body' is passed, all JavaScript resources will be Placed at the bottom of the body element. 'head' places the script in the head element
{String}	Adds the given icon path to the output HTML
{Boolean}	If true will webpack append a unique compilation hash to all included scripts and CSS files. This is very useful for cache clearing
{?}	Put in the resource module you need to import
{?}	Do not put some of your resource modules