Webpack核心loader (三）—— 使用第三方库

1.入口文件引入

：只要引入都会被打包

cnpm i jquey -S

index.js

import $ from 'jquey';

$('ul li:last-child').css('background','pink')

2.Webpack.ProvidePlugin引入 //建议使用这种

• 自动加载模块，而不必用import或require
• 如果加载的模块没有使用，则不会被打包
• 加载的模块为全局模块，在全局都可以使用（而入口文件只能在加载入口文件的地方使用）

const webpack = require('webpack'); //引入热更新插件


module.exports = {
    entry:'./src/js/index.js',  //入口起点
    output:{ //输出
        path:path.resolve(__dirname,'dist'), //目标输出目录的绝对路径
        filename:'js/boundle.js'  //输出文件的文件名
    },
    plugins:[
        new webpack.ProvidePlugin({
            $:'jquery'   //引入第三方库
        }),
       
    ],
   module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
           },
   }
}

-S放在生产环境中，不光开发环境且上线环境也需要

cnpm i jquey -S //jqeury为例子