Webpack-8【Webpack引入库、字体文件、imports-loader】

一.Webpack引入库

npm i bootstrap@3.3.7 -D

index.js中

import 'bootstrap/dist/css/bootstrap.css'

index.html

<div id="app">
    <ul class="list-group">
        <li class="list-group-item"></li>
    </ul>
</div>

二.字体文件

module:{
    rules:[{
        test:/\.css$/,
        use:[{
            loader:'style-loader'
        },{
            loader:'css-loader'
        }]
    },{
        test:/\.(eot|svg|ttf|woff|woff2)$/,
        use:[{
            loader:'file-loader',
            options:{
                name:'app.[ext]'
            }
        }]
    }]
}

三.imports-loader

webpack.ProvidePlugin:

providePlugin是webpack内置模块

使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入

imports-loader

允许您使用依赖于特定全局变量的模块

这对于依赖全局变量$或this作为window对象的第三方模块非常有用

var webpack = require('webpack');
new webpack.ProvidePlugin({
    $:'jquery'
})

不需要在index.js中引入也依然可以使用

引入本地资源

module:{
    rules:[{
        test:path.resolve(__dirname,'libs/jquery.min.js'),
        use:{
            loader:'imports-loader',
            options:{
                $:'jquery'
            }
        }
    }]
}

resolve:{
    alias:{
        jquery$:path.resolve(__dirname,'libs/jquery.min.js')
    }
}

index.js

import $ from 'jquery'