zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    添加组合索引时,做相等运算字段应该放在最前面
    常用位运算
    redis php扩展简单使用
    mysql优化之简单概念
    mysql优化之sql语句优化
    简单画图 gd库函数
    win下 安装mongodb
    伪静态之实际应用
    tomcat win简单配置
    docker
  • 原文地址:https://www.cnblogs.com/SofiaTJU/p/9454291.html
Copyright © 2011-2022 走看看