webpack的一些使用方法

1. externals的使用(深入浅出webpack之externals的使用

externals: 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

例如,从 CDN 引入 jQuery

(1)在HTML中引入第三方库的cdn

(2)在webpack.config.js中配置externals

这样就剥离了那些不需要改动的依赖模块,下面展示的代码还可以正常运行:

2. CommonsChunkPlugin 提取公共代码(详见详解CommonsChunkPlugin的配置和用法

CommonsChunkPlugin主要是用来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大,从而导致加载时间过长

可配置的属性:

  • name:可以是已经存在的chunk(一般指入口文件)对应的name,那么就会把公共模块代码合并到这个chunk上;否则,会创建名字为name的commons chunk进行合并
  • filename:指定commons chunk的文件名
  • chunks:指定source chunk,即指定从哪些chunk当中去找公共模块,省略该选项的时候,默认就是entry chunks
  • minChunks:既可以是数字,也可以是函数,还可以是Infinity

可以像这样设置webpack.config.js:

这样就会把公共模块代码合并到base.js文件中

(注意:如果在plugins配置了new webpack.optimize.CommonsChunkPlugin,生成了一个公共文件,页面必须先引用这个公共文件,再引用其他的js文件)

3.webpack分离单独打包css文件

(1)安装插件

(2)配置webpack.config.js:

(3)在编译之前安装需要用到的style-loader和css-loader

(4)在终端进行webpack

猜你喜欢

转载自www.cnblogs.com/SofiaTJU/p/9454291.html