Home > Developer > JavaScript
Webapck html-loader achieves resource reuse and webapckhtml-loader
1. Installation
npm i html-loader --save-dev
2. project directory
The footer.html file under the layoutfolder is:
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
The head-common.html file under the layoutfolder is:
<Meta charset = "UTF-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "keywords" content = "MMall, happymmall, MMall e-commerce, online shopping, online shopping malls, digital products, mobile phones, laptops, cameras, watches, headphones, e-commerce videos, e-commerce tutorials, download e-commerce source code "> <meta name =" description "content =" a product that provides tens of thousands of high-quality products, including digital communication, mobile phones, computers, Home Products, clothing and apparel, Maternal and Child, books, and food, the best and most convenient online shopping platform. "> <Link rel =" dns-prefetch "href =" // cdn.bootcss.com "> <link rel =" dns-prefetch "href =" // s.happymmall.com "> <link rel = "dns-prefetch" href = "// img.happymmall.com"> <script> var _ hmt = _ hmt | []; (function () {var hm = document. createElement ("script"); hm. src = "https://hm.baidu.com/hm.js? Bc210cd22928076d28296716d9dfcf01 "; var s = document. getElementsByTagName (" script ") [0]; s. parentNode. insertBefore (hm, s) ;}) (); </script>
The login.html file is (Included Configuration):
<!DOCTYPE html>3. The webpack. config. js file is:
// Process html template var htmlWebpackPlugin = require ('html-webpack-plugin'); // process shared and common jsvar webpack = require ('webpackage '); // var ExtractTextPlugin = require ("extract-text-webpack-plugin") packaged separately in css; // var getHtmlConfig = function (name, title) {return {template :'. /src/view/'+ name + '.html', filename: 'view/'+ name + '.html', favicon :'. /favicon. ico ', title: title, inject: true, Hash: true, chunks: ['common', name] };}; module. exports = {// entry :'. /src/app. js', entry: {// common module 'common ':['. /src/page/common/index. js'], 'login ':['. /src/page/login/index. js'], 'index ':['. /src/page/index. js']}, output: {path: _ dirname + '/dist', filename: 'js/[name]. js '}, // load external variables or modules into externals: {'jquery': 'window. jQuery '}, module: {loaders: [{test :/\. js $/, // The following directory does not process ex Clude:/node_modules/, // only process the following directories: include:/src/, loader: "babel-loader", // configure the target Runtime environment (environment) automatically enable the required babel plug-in query: {presets: ['latest '] }}, // css to process this section {test :/\. css $/, use: ExtractTextPlugin. extract ({fallback: "style-loader", use: [// 'style-loader ', {loader: 'css-loader', options: {// support @ important introducing css importLoaders: 1 }}, {loader: 'postcss-loader', options: {plugins: function (){ Return [// It must be written before require ("autoprefixer"). Otherwise, require ("autoprefixer") ('postcss-import') (), require ("autoprefixer") is invalid ") ({"browsers": ["Android> = 4.1", "iOS> = 7.0", "ie> = 8"]})] }}]})}, // less process this part {test :/\. less $/, use: ExtractTextPlugin. extract ({fallback: "style-loader", use: [// 'style-loader ', {loader: 'css-loader', options: {// support @ important introducing css importLoaders: 1 }}, {loade R: 'postcss-loader ', options: {plugins: function () {return [// be sure to write it in front of require ("autoprefixer"); otherwise, require ("autoprefixer ") invalid require ('postcss-import') (), require ("autoprefixer") ({"browsers": ["Android> = 4.1", "iOS> = 7.0 ", "ie> = 8"]})] }}, 'less-loader ']})}, // process the html template // {// test: /\. html $/, // use: {// loader: 'html-loader '//}, // process the image {test :/\. (png | jpg | gif | svg) $/I, loaders :[// If the image size is less than 8 KB, It is base64. If the image size is greater than 10 KB, file-loader 'url-loader? Limit = 8192 & name: img/[name]-[hash: 5]. [ext] ', // image Compression 'image-webpack-loader']}, plugins: [// html template processing // new htmlWebpackPlugin ({// template: 'index.html ', // filename: 'index.html', // inject: true, // hash: true, // chunks: ['common', 'index'] //}), new htmlWebpackPlugin (getHtmlConfig ('index', 'homepage'), new htmlWebpackPlugin (getHtmlConfig ('login', 'logon page ')), // independent general modules to js/common. js new webpack. optimize. commonsChunkPlugin ({// block name of the public block: 'common', // The generated file name filename: 'js/common. js '}), // css is separately packaged into the file new ExtractTextPlugin ('css/[name).css')]}Note: html-loadehas been configured in login.html.
4. execute commands and view results
npm run webpack
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
