webpack

最近老有小伙伴问我webpack的问题    今天我们就来总结一下webpack是什么

webpack 是一个打包工具

作为初学者：

• 理解 webpack 的作用

  • 改变前端开发的方式：传统=>工程化

  • 在前端脚手架工具（vue-cli）中已经集成了 webpack

• 掌握 webpack 的基本使用

  • webpack.config.js ：核心

    • mode: dev,test

    • entry

    • output

    • devtool

    • module=>rules:[{loader配置}]

    • plugins

    • devServer

    • optimization(必须是生产模式 mode:'production')才生效

  • loader： 帮助 webpack 处理非 js 模块

    • 字体文件拷贝

    • 图片（自动转 base64）

    • js 降级

    • 编译.vue组件

  • plugin： 增强 webpack 的功能

    • 把 css 提取到一个文件，压缩

    • 用 HtmlWebpackPlugin 把指定模板.html 自动加载打包之后资源=》预览

    • webpack-dev-server 实时预览=》工程化=》开发调试

    • 清空上次打包文件

  • 优化webpack打包速度(build后的打的包)

    • 开启多进程打包.

      • thread-loader(webpack4官方推荐)

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // 创建一个 js worker 池
        use: [ 
          'thread-loader',
          'babel-loader'
        ] 
      },
      {
        test: /\.s?css$/,
        exclude: /node_modules/,
        // 创建一个 css worker 池
        use: [
          'style-loader',
          'thread-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      }
      // ...
    ]
    // ...
  }
  // ...
}

• 在webpack构建过程中，实际上耗费时间大多数用在 loader 解析转换以及代码的压缩中，HappyPack 可利用多进程对文件进行打包(默认cpu核数-1)，对多核cpu利用率更高。HappyPack 可以让 Webpack 同一时间处理多个任务，发挥多核 CPU 的能力，将任务分解给多个子进程去并发的执行，子进程处理完后，再把结果发送给主进程。

  • 合理利用缓存,使用cache-loader，HardSourceWebpackPlugin 或 babel-loader 的 cacheDirectory 标志

  • 优化压缩时间

• 优化webapck启动项目时间

  • 如果使用 chrome 浏览器，那么在开发环境下，其实可以关闭 babel 的转义：includes: []。还有可以添加 babel 的缓存：loader: "babel-loader?cacheDirectory=true"

  • 配置exclude

    • exclude 是 loader 插件用来排除查找目录的，一般是 node_modules目录。exclude: /node_modules/

  • alias -alias 用来简化查找路径的，一般来说一些脚手架里面会默认配置 @代表 src目录，那么我们可以根据此分别配置不同的内容，来减少一级一级查找。

以上就是我个人对webpack的一个理解     希望可以帮助到你们