一、webpack中静态资源输出
所谓静态资源输出,说白了就是一些文件不需要经过webpack处理,直接输出到指定的地方(类似于粘贴复制)
实现步骤:
1、npm i copy-webpack-plugin -D
2、引入 const CopyWebpackPlugin = require('copy-webpack-plugin');
3、使用:
new CopyWebpackPlugin([{
from:path.resolve(__dirname,'src/assests'),
to:'./assests'
}])
当然,参数不止from、to,还有一些,可以到官网看,这两个最常用
二、webpack使用第三方库的两种方法(以jQuery为例,其它的也都类似)
第一种:(不太推荐)
1、下载:npm i -S jquery
2、引入:import $ from 'jquery'
3、使用就可以了
第二种:(比较推荐)
1、下载:npm i -S jquery
2、const webpack = require('webpack');
3、在plugins里面添加插件ProvidePlugin
new webpack.ProvidePlugin({
$:'jquery'
})
4、使用就可以了
那,说说通过ProvidePlugin和import直接引入两者的区别
import引入之后,无论你在代码中是否使用jQuery,打包后,jQuery这个库都会打包进去,这样就会产生大量的冗余js,ProvidePlugin只有你在使用到此库的时候,才会打包进去。所以会比较推荐使用第二种方法