webpack4.x 配置下载第三方库,分离js成单个文件引入HTML 第十节

使用第三库: 

1. 直接npm下载，然后引入（完全可以使用，但是我个人不是很推荐）

    cnpm i jquery -S

    import $ from 'jquery'

    $(xxxx).on()
    $(xxx).css()

1. ProvidePlugin (个人推荐此方式)

   const webpack = require('webpack');
   
   在plugins里面使用:
   
   plugins:[
       new Webpack.HotModuleReplacementPlugin(),
       new HtmlWebpackPlugin({
           title:'Hello World',
           template: './src/index.html' //模板地址
       }),
       new Webpack.ProvidePlugin({ //下载Jquery库
           $:'jquery'
       })
   ]
   

通过ProvidePlugin和 import直接引入区别:

1. import $...，引入之后，无论你在代码中是否使用jquery，打包后，都会打进去，这样其实产生大量的冗余js
2. Provideplugin, 只有你在使用到此库，才会打包

---

提取第三方库(或者想单独提出来的)js库,增加一个optimization配置,和plugins同级

在webpack3.x版本之前：使用new webpack.optimize.CommonsChunkPlugin现在已经不支持

new webpack.optimize.CommonsChunkPlugin({
        name:'jquery'
})

-

在webpack4.x以后提取第三方库或js单独引入html使用如下方法

1.配置入口文件

entry:{
    entry: jsonConfig.entry,
    jquery:'jquery',
    angular:'angular'
}, 

2.下载库

plugins:[
    // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
    // "build": "webpack --mode production", 就自动压缩额
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
    new PurifyCssWebpack({ //消除冗余代码
        // 首先保证找路径不是异步的,所以这里用同步的方法
        // path.join()也是path里面的方法,主要用来合并路径的
        // 'src/*.html' 表示扫描每个html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 

    }),
    new CopyWebpackPlugin([ //支持输入一个数组
        {
            from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
            to: './public' // 复制到publiv
        }
    ]),
    new Webpack.ProvidePlugin({
        $:'jquery', //下载Jquery
        A:'angular' // 下载Angular
    })
],

3.分离单独JS，注意：optimization和Plugins是同级，而不是在Plugins内

plugins:[
    // Uglify是压缩js,现在已经不需要了,只需要在script里面写成
    // "build": "webpack --mode production", 就自动压缩额
    //new Uglify(),  
    new Webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        title:'Hello World',
        template: './src/index.html' //模板地址
    }),
    new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
    new PurifyCssWebpack({ //消除冗余代码
        // 首先保证找路径不是异步的,所以这里用同步的方法
        // path.join()也是path里面的方法,主要用来合并路径的
        // 'src/*.html' 表示扫描每个html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 

    }),
    new CopyWebpackPlugin([ //支持输入一个数组
        {
            from: path.resolve(__dirname, 'src/assets'), //将src/assets下的文件
            to: './public' // 复制到publiv
        }
    ]),
    new Webpack.ProvidePlugin({
        $:'jquery',
        A:'angular'
    })
],
optimization:{
    splitChunks:{
        cacheGroups:{ // 单独提取JS文件引入html
            aaa:{ // 键值可以自定义
                chunks:'initial', // 
                name:'jquery', // 入口的entry的key
                enforce:true   // 强制 
            },
            bbb:{
                chunks:'initial',
                name:'angular',
                enforce:true
            }
        }
    }
}