webpack(v4.8.3)中静态资源输出以及使用第三方库的两种方法

一、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只有你在使用到此库的时候，才会打包进去。所以会比较推荐使用第二种方法