Shulou(Shulou.com)06/01 Report--

This article mainly explains the "webpack on the html file processing method", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in-depth, together to study and learn "webpack on the html file processing method"!

Why deal with html files?

All our methods are packaged under the dist folder, and our html is under the self-defined folder. If we manually go to a src to introduce the js under these dist folders, it would be a bit unreliable.

So the solution is:

Use the webpack plug-in: HtmlWebpackPlugin

Step 1: download

Npminstall--save-devextract-text-webpack-plugin

Step 2: webpack.config.js configuration

The configuration items of HtmlWebpackPlugin are:

Name type Description

Title {String} title of the generated HTML document

Filename {String} the file to generate HTML. You can specify a directory

Template file on which template {String} is based

Inject {Boolean | String} where to inject js resources into the page. The values are: true\ 'head'\' body'\ false, when passing true or 'body' 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 HTML

Hash {Boolean} if true appends all the scripts and CSS files contained in webpack to a unique compiled hash. This is very useful for cache cleanup

Chunks {?} put in the resource module that you need to introduce

ExcludeChunks {?} does not put into some of your resource modules

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

For example, login pages introduce js and css of login, and index introduces corresponding js and css.

The webpack.config.js configuration is as follows:

Constpath=require ('path'); constwebpack=require (' webpack') constExtractTextPlugin=require ("extract-text-webpack-plugin"); constHtmlWebpackPlugin=require ('html-webpack-plugin'); constconfigs= {

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: [/ / independent general module

Newwebpack.optimize.CommonsChunkPlugin ({

Name:'common'

Filename:'js/base.js'

}), / / package css independently

NewExtractTextPlugin ('css/ [name] .css'), / / A pair of html templates are processed to generate the corresponding html, and the required resource modules are introduced

NewHtmlWebpackPlugin ({

Template:'./src/view/index.html',// template file

Filename:'view/login/index.html',// object file

Chunks: ['commom','login'], / / corresponding to the loaded resources

Inject:true,// resources are added to the bottom

Hash:true// adds the version number

})

]

}

Module.exports=configs

Thank you for your reading, the above is the content of "webpack's handling of html files". After the study of this article, I believe you have a deeper understanding of webpack's handling of html files, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.