webpack

最新推荐文章于 2021-04-02 11:12:08 发布

Anne的前端之路

最新推荐文章于 2021-04-02 11:12:08 发布

阅读量142

点赞数

分类专栏： javascript webpack

本文链接：https://blog.csdn.net/qq_31403519/article/details/100823104

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

什么是loader，什么是plugin

Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

什么是bundle，什么是chunk，什么是module

bundle：是由webpack打包出来的文件。
chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。

.什么是模热更新？有什么优点？

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

什么是Tree-shaking

Tree-shaking可以用来剔除javascript中不用的死代码，它依赖静态的es6模块化语法，例如通过@import 和export 导入导出，js通过uglifyjs-webpack-plugin插件实现tree-shaking，css中使用Tree-shaking需要引入Purify-CSS

webpack-dev-server 和 http服务器的区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。

几个常见的loader

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
source-map-loader：加载额外的 Source Map 文件，以方便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 检查 JavaScript 代码

几个常见的plugin

define-plugin：定义环境变量
uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
mini-css-extract-plugin：分离css文件
clean-webpack-plugin：删除打包文件
happypack：实现多线程加速编译
commons-chunk-plugin：提取公共代码

如何利用webpack来优化前端性能？（提高性能和体验）

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件，利用cssnano（css-loader?minimize）来压缩css
利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。
提取公共代码。

提高webpack编译效率的四种方法：提取公用代码、提取常用库、缓存、多核

在webpack4中，配置webpack时使用optimization属性：

{
module:{...},
plugins:[...],  
optimization: {
    //runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      cacheGroups: {
        //mode_modules第三方模块
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /[\\/]node_modules[\\/]/
        },
        // 打包公共模块
        commons: {
          chunks: 'initial', // initial表示提取入口文件的公共部分
          minChunks: 2, // 表示提取公共部分最少的文件数
          minSize: 0, // 表示提取公共部分最小的大小
          name: 'commons' // 提取出来的文件命名
        }
      }
    }
  }
}

缓存：

使用cache-loader ，将 loader 的编译结果写入硬盘缓存，再次构建如果文件没有发生变化则会直接拉取缓存。只需要把它写在代价高昂的 loader 的最前面即可：

module.exports = {
module: {
    rules: [
      {
        test: /\.ext$/,        
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
      }
    ]
  }
};

多核：

使用happypack插件，使用方法如下：

要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下

const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池
// 拿到系统CPU的最大核数，happypack 将编译工作灌满所有线程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {  
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,        
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [   
   new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: [
        {
          loader: 'babel-loader',
        }
      ]
    })
  ]
}

用 happypack 提供的 Plugin 为Loaders 做一层包装，向外暴露一个id ，而在module.rules 里，就不需要写loader了，直接引用这个 id 即可。

而对于一些编译代价昂贵的 webpack 插件，一般都会提供 parallel 这样的配置项供你开启多核编译。

PS：这里需要特别提及一个在 production 模式下容易遇到的坑，因为有个特殊的角色出现了 —— mini-css-extract-plugin：

MiniCssExtractPlugin 无法与 happypack 共存，如果用 happypack 对 MiniCssExtractPlugin 进行包裹，就会触发这个问题：github.com/amireh/happ… 。

MiniCssExtractPlugin 必须置于 cache-loader 执行之后，否则无法生效，参考issue：github.com/webpack-con… 。

所以最后，在 production 模式下的 CSS Rule 配置就变成了下面这样：

module.exports = {
    ...,    
    module: {
        rules: [
            ...,
            {
                test: /\.css$/,
                exclude: /node_modules/,                
                use: [
                    _mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,                   
                    'happypack/loader?id=css'
                ]
            }
        ]
    },
    plugins: [        
        new HappyPack({
          id: 'css',
          threadPool: happyThreadPool,
          loaders: [    
            'cache-loader',            
            'css-loader',            
            'postcss-loader',
          ]
        })
    ]
}