webpack的一些使用方法

标签：www   extern   存在   外部   html   import   lob   jquery   ack   

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

webpack的一些使用方法

标签：www   extern   存在   外部   html   import   lob   jquery   ack   

原文地址：https://www.cnblogs.com/SofiaTJU/p/9454291.html