webapck html-loader實現資源複用

時間 2019-11-07

原文原文鏈接

一、安裝javascript

npm i html-loader --save-dev

二、項目目錄css

layout文件夾下的footer.html文件爲：html

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js "></script>

layout文件夾下的head-common.html文件爲：java

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="keywords" content="MMall，happymmall，MMall電商，網上購物，網上商城，數碼產品，手機，筆記本，相機，手錶，耳機，電商視頻，電商教程，電商源碼下載">
<meta name="description" content="一個提供數碼通信、手機、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬種優質商品，最優質、最便捷的網上購物平臺。">
<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>

<!DOCTYPE html>
<html>
    <%= require('html-loader!./layout/head-common.html') %>
    <body>
        <%= require('html-loader!./layout/footer.html') %>
    </body>

</html>

三、webpack.config.js文件爲：jquery

//處理html模板
var htmlWebpackPlugin = require('html-webpack-plugin'); //處理共用、通用的js
var webpack = require('webpack'); //css單獨打包
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 獲取html-webpack-plugin參數的方法 
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': ['./src/page/common/index.js'], 'login': ['./src/page/login/index.js'], 'index': ['./src/page/index/index.js'] }, output: { path: __dirname + '/dist', filename: 'js/[name].js' }, //將外部變量或者模塊加載進來
 externals: { 'jquery': 'window.jQuery' }, module: { loaders: [{ test: /\.js$/, //如下目錄不處理
                exclude: /node_modules/, //只處理如下目錄
                include: /src/, loader: "babel-loader", //配置的目標運行環境（environment）自動啓用須要的 babel 插件
 query: { presets: ['latest'] } }, //css 處理這一塊
 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ //'style-loader',
 { loader: 'css-loader', options: { //支持@important引入css
                                importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //必定要寫在require("autoprefixer")前面，不然require("autoprefixer")無效
                                        require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] }) }, //less 處理這一塊
 { test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ //'style-loader',
 { loader: 'css-loader', options: { //支持@important引入css
                                importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //必定要寫在require("autoprefixer")前面，不然require("autoprefixer")無效
                                        require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } }, 'less-loader' ] }) }, // //處理html模板 // { // test: /\.html$/, // use: { // loader: 'html-loader' // } // },
            //處理圖片
 { test: /\.(png|jpg|gif|svg)$/i, loaders: [ //小於8k的圖片編譯爲base64，大於10k的圖片使用file-loader 
                    'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]', //圖片壓縮
                    'image-webpack-loader' ] } ] }, plugins: [ //html模板處理 // new htmlWebpackPlugin({ // template: 'index.html', // filename: 'index.html', // inject:true, // hash:true, // chunks:['common','index'] // }),
        new htmlWebpackPlugin(getHtmlConfig('index', '首頁')), new htmlWebpackPlugin(getHtmlConfig('login', '登陸頁')), // 獨立通用模塊到js/common.js
        new webpack.optimize.CommonsChunkPlugin({ //公共塊的塊名稱
            name: 'common', //生成的文件名
            filename: 'js/common.js' }), //css 單獨打包到文件
        new ExtractTextPlugin('css/[name].css') ] }