美文网首页
webpack使用css-loader加载font图标,xml-

webpack使用css-loader加载font图标,xml-

作者: passenger_z | 来源:发表于2020-02-15 16:41 被阅读0次
捕获.JPG
阿里巴巴矢量图标库
  • 安装loader
npm install -D xml-loader css-loader postcss-loader style-loader
  • webpack.config.js
    css-loader要放在style-loader后面,因为webpack加载loader是从后往前的,否则会报错
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin}= require('clean-webpack-plugin')
module.exports = {
    mode:'development',
    devtool:'source-map',
    module:{
        rules:[
            {
                test:/\.eot|svg|ttf|woff|woff2/,
                use:[
                    {
                        loader: 'file-loader'  //file-loader处理文件
                    }
                ]
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    {
                        loader:'css-loader',
                        options:{
                           // module:true,//css模块化 css不会影响全局
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.xml$/,
                use: [
                'xml-loader'
                ]
            },
        ]
    },
    entry:{
        main:'./src/index.js'
    },
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'./dist')
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin(
            {
                title:'learnWebpack',
                filename:'dist.html',
                template:'./index.html'
            }
        )
    ]
}

index.js

import './index.css'
import './icon.css'
import data from './data.xml' 
let p = document.createElement('p')
let span = document.createElement('span')
p.classList.add("color")
p.innerHTML = "123color"
span.className = 'iconfont icon-aixin'
document.body.append(p)
document.body.append(span)
console.log1(data)

index.css

.color{
    color: #AAAA;
    transform: translate(100px,100px);
}

postcss.config.js

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

data.xml

<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>
  • html-webpack-plugin

    • 安装

    • npm install --save-dev html-webpack-plugin
      
    • 配置

    • title:模板标题
      filename:输出文件名字
      template:指定模板
      inject:true允许把js文件打包后注入到html打包文件里
      favicon:html图标设置
      meta:{} 定义html meta 视口等信息
      minify:true是否压缩
      
  • clean-webpack-plugin

npm install -D clean-webpack-plugin
  • 每一次打包都会清除以前打包的内容,而不是手动清除
    github地址

相关文章

网友评论

      本文标题:webpack使用css-loader加载font图标,xml-

      本文链接:https://www.haomeiwen.com/subject/qqcyfhtx.html