打赏

webapck html-loader实现资源复用

1、安装

npm i html-loader --save-dev

2、项目目录

 

layout文件夹下的footer.html文件为：

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

layout文件夹下的head-common.html文件为：

<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>

login.html文件为（已包含配置）：

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

</html>

3、webpack.config.js文件为：

 

//处理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中配置好了。

4、执行命令&查看效果

npm run webpack

 



posted @ 2017-09-25 10:05  孟繁贵  阅读(14078)  评论(2)  编辑  收藏  举报
TOP