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

本是古典何须时尚 2022-05-28 14:16 179阅读 0赞

**使用第三库: **

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内