webpack 使用外部的库_22-webpack进阶模块2

一、noparse

背景

webpack导入的模块会分析依赖项，但是如果针对单独的项目也分析依赖会消耗webpack的性能

解决方案

为webpack添加noparse属性

module: {

noParse: /jquery|lodash/,

}

二、IgnorePlugin

背景

针对插件会存在多语言版本，webpack打包会把所有的语言版本进行打包，从而使得大打包文件存在代码赘余。

解决方法

使用内部插件webpack,以moment模块为例

new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

三、externals

背景

有些不变的库在二次打包也将该文件打包，为了对一些代码不变的库进行打包，只进行一次打包

解决方案

2、在配置文件中告诉webpack这是一个外部扩展库, 不需要打包

externals: {

/*

以下配置的含义:

告诉webpack我们在通过import导入jquery的时候, 不是导入node_modules中的jquery

而是导入我们全局引入的jquery

* */

jquery: 'jQuery',

lodash: '_'

},

四、动态链接库

背景

该功能和externals一样，但是不符合前端模块化规则，每次必须手动引入script。

解决方案

1、新建一个配置文件，用于打包第三方库。

module.exports = {

mode: 'production',

entry: {

vendors:[ 'jquery']

},

output: {

filename: '[name].[hash:8].js',//如果无读取文件，则把hash值去除

path: path.resolve(__dirname, 'dll'),

library: '[name]' // 表示打包的是一个库, 表示将打包的内容通过全局变量暴露出去

}

};

2、将打包好的文件插入到html文件中

npm install --save-d add-asset-html-webpack-plugin

new AddAssetHtmlWebpackPlugin({

filepath: path.resolve(__dirname, 'dll/vendors.js')

})

//该插件需要配合HtmlWebpackPlugin使用, 并且需要在HtmlWebpackPlugin后创建

3、在新的配置文件中，生产清单。

plugins: [

new Webpack.DllPlugin({

name: '[name]',

path: path.resolve(__dirname, 'dll/[name].manifest.json')

})

]

4、在原配置文件中读取该清单,并且不需要再次打包清单中的js文件。

new Webpack.DllReferencePlugin({

manifest: path.resolve(__dirname, 'dll/vendors.manifest.json')

})

5、优化(导入多个第三方的库)

使用nodejs动态添加。

1、先读取目录中的所有文件

2、根据文件后缀名添加清单文件和库文件到plugins中