webpack(10)打包其他资源文件引用阿里的图标库

1.进入网页:https://www.iconfont.cn/,登录后找到自己想要的图标,点击购物车图标添加入库,然后选择下载代码。

2.下载下来的是一个压缩文件里面有很多不同后缀的文件。在我们的项目下新建一个svg的文件夹,将下载的文件除了demo开头的两个文件其他全部拷贝到svg文件夹下。

3.在index.js中引入,下载的css文件:require(‘../svg/iconfont.css‘);

4.在iconfont.css中开头将它引用的url加上"./"前缀,为了后面将他引用的文件打包后引用地址正确

5.在index.html中引入图标:

<p>
        <span class="iconfont icon-time"></span>//这里的icon-time是我所下载的图标的名称,需要和自己的对应,具体叫什么名字可以在iconfont.css文件中找到
    </p>
6.这里打包的文件类型很多,有.ttf/.woff/.eot等。我们使用file-loade来对这些其他文件统一打包,因为他们都不需要进行特殊处理,只要原样输出到打包的文件夹,并保证引用路径正确就可以了。
 
7.配置webpack-config.js文件:
const{resolve}=require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘);
const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);

module.exports={
    entry:{
        vender:[‘./src/js/jquery.js‘,‘./src/js/common.js‘],
        index:‘./src/js/index.js‘,
        cart:‘./src/js/cart.js‘
    },
    output:{
        path:resolve(__dirname,‘build‘),
        filename:‘[name].js‘
    },
    mode:‘development‘,
    module:{
        rules:[
            //{test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]},
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,‘css-loader‘,‘postcss-loader‘]},
            {test:/\.less$/,use:[MiniCssExtractPlugin.loader,‘css-loader‘,‘less-loader‘,‘postcss-loader‘]},
            {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,‘css-loader‘,‘sass-loader‘,‘postcss-loader‘]},
            {test:/.(jpg|png)$/,use:[{ loader:‘url-loader‘,options:{
                publichPath:‘./images‘,
                outputPath:‘images/‘,
                limit:1024*16,
                name:‘[name].[ext]‘
            }}]},
            {test: /\.(html)$/, use:[‘html-loader‘]},
            {exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:‘file-loader‘,options:{//配置打包其他文件,exclude表示打包件除了写进去的后缀的其他文件
                publichPath:‘./svg‘,//打包后引用文件需要加上的路径前缀
                outputPath:‘svg/‘,//打包输出的文件夹
                name:‘[name].[ext]‘//打包后文件的输出名称,这里表示原名称不变
            }}]}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:‘./src/index.html‘,
            filename:‘index.html‘,
            chunks:[‘vender‘,‘index‘]
        }),
        new HtmlWebpackPlugin({
            template:‘./src/cart.html‘,
            filename:‘cart.html‘,
            chunks:[‘vender‘,‘cart‘]
        }),
        new MiniCssExtractPlugin({
            filename:‘index.css‘
        }),
        //new OptimizeCssAssetsPlugin()
    ]
}

webpack(10)打包其他资源文件引用阿里的图标库

上一篇:LNMP搭建静态网页服务器


下一篇:centos network