webapck html-loader實現資源複用

時間 2019-11-14

原文原文鏈接

一、安裝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')
    ]
}

注：html-loade已經在login.html中配置好了。webpack

四、執行命令&查看效果web