Webpack processing of html files
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
Step 2: webpack.config.jsConfiguration
The configuration items of HtmlWebpackPlugin are:
| Name | Type | Description |
|---|---|---|
| {String} | Title for the generated HTML document | |
| {String} | The file to generate HTML for. 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 |
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('path');const webpack = require('webpack')const ExtractTextPlugin = require("extract-text-webpack-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');const configs = {
entry:{ 'commom':['./src/page/common/index.js'], 'index':['./src/page/index/index.js'], 'login':['./src/page/login/index.js']
},
output:{
path:path.resolve(__dirname, 'dist'),
filename:'js/[name].js'
},
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins:[ //独立通用模块
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
}), //独立打包css
new ExtractTextPlugin('css/[name].css'), //对html模板进行处理，生成对应的html,引入需要的资源模块
new HtmlWebpackPlugin({
template:'./src/view/index.html',//模板文件
filename:'view/login/index.html',//目标文件
chunks:['commom','login'],//对应加载的资源
inject:true,//资源加入到底部
hash:true//加入版本号
})
]
}
module.exports= configs
- 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
- First step: Download
npm install --save-dev extract-text-webpack-plugin
webpack.config.jsConfiguration
| Type | Description | |
|---|---|---|
| {String} | Title for the generated HTML document | |
| {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 |
