webpack

Posted yingmhd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack相关的知识,希望对你有一定的参考价值。

webpack是一个JS应用打包器,它借助loaders(比如 sass-loader)plugins(比如UglifyJsPlugin)将各种形态的的文件压缩、打包、优化,变成浏览器可以正常解析的文件。

模块化机制

它允许各种模块化规范的存在,你可以用export,也可以用exports,你可以用import,也可以用require,至于依赖关系,它自动处理好。

核心思想

  1. 一切皆模块
    你可以require一个js文件,也可以require一个css文件
  2. 按需加载
    传统模块打包工具最终将所有的模块编译成一个庞大的bundle.js,而webpack分割成了许多个bundle文件,而且异步加载代码实现按需加载

工作步骤

  1. 从入口文件开始递归建立一个依赖关系图
  2. 将所有的模块转化成模块函数,模块id是唯一记号
  3. 根据依赖关系,按照配置文件将模块函数分组打包成若干个bundle
  4. 通过script标签将打包后的bunld注入到html中,通过manifest文件来管理bundle文件的运行和加载

manifest 文件作用

用来引导模块的交互。manifest文件包含了加载和处理模块的逻辑。

.map 文件作用

webpack打包后会生成一个.map文件,这个主要为了调试方便,可以精确指出错误在哪里

常用优化

  1. include & exclude实现精准打包
  2. resolve.extension 设置文件默认后缀,默认是[\'.js\', \'.json\']
  3. HappyPack将任务分解为多个子进程
  4. watchOptions监听文件变化发生后一段时间再刷新浏览器,防止刷新了文件还没编译好
  5. 模块热替换
  6. 区分环境

    if(process.env.NODE_ENV == \'production\'){
        console.log(\'生产环境\');
    }else{
        console.log(\'开发环境\');
    }
  7. Tree Shaking剔除javascript用不上的死代码
  8. 使用common-chunk-and-vendor-chunk提取公共代码
  9. splitChunks将公共的依赖提取到一个新生成的chunk,防止重复

以上是关于webpack的主要内容,如果未能解决你的问题,请参考以下文章

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

如何使用webpack加载库源映射?

浅析 -- webpack

报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

报错:✘ http://eslint.org/docs/rules/indent Expected indentation of 0 s paces but found 2(代码片段

无法创建中继容器; graphql.js 文件似乎有 webpack 工件?