webpack常见配置字段及优化方案

最新推荐文章于 2024-04-17 15:12:26 发布

只管去努力

最新推荐文章于 2024-04-17 15:12:26 发布

阅读量351

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_53011724/article/details/126986764

版权

一：SPA是什么？
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时，通过js动态更新该页面的Web应用程序。

优点：

良好的用户体验
采用前后端分离的方式进行开发，开发体验更友好
减少服务器的请求，请求一次html及可
缺点：

复杂的、数据量大的应用首页，加载会比较缓慢
浏览器seo不友好（js实现动态交互）

二：常见的前端构建工具
前端构建工具有很多，例如：webpack，vite，rollup，gulp等等

1，webpack
webpack是facebook公司推出的一款致力于前端应用打包的工具，webpack采用模块化的思想，通过esModule生成模块依赖图，然后通过loader、plugins等插件编译依赖图中的模块，生成浏览器可识别的js、json类型的文件。

2，vite
vite是基于esm的前端构建工具，与webpack先全局构建打包并生成bundle产物不同，vite是通过拦截浏览器端的请求，通过middlewares根据请求加载并解析请求所需要的资源文件。

三：webpack字段及其作用
1，模式

mode：‘production’ / ‘development’ / ‘none’

作用：用来指定打包的环境，生产环境还是开发环境

2，入口

entry: string | object | array

作用：指定打包入口，可以指定项目是单页面打包还是多页面打包，通常一个html模版对应一个入口文件

3，输出

output: object

作用：用来定义打包输出的结果，包括文件位置、name、type等

4，模块

module：object

作用：包含多个模块，每个模块用来处理特定类型的文件

5，模块解析

resolve：object

作用：一般常用来配置文件后缀、模块导入的别名解析

6，代码映射

devTool：string

作用：用来指定是否打包生成对应的map映射文件，以及map文件类型

7，热更新

devServer: object

作用：开发环境下的静态资源服务器

8，插件

plugins：array

作用：通过插件机制可以丰富webpack的功能

9，目标产物

target：string

作用：告知 webpack 为目标(target)指定一个环境。默认值为 browserslist，如果没有找到 browserslist 的配置，则默认为 web

10，优化

optimization：object

作用：webpack4提出的webpack优化方案，包含webpack默认优化方式，可手动覆盖

四：webpack打包优化
1，css压缩

// css压缩
const OptimizeCssAssetsWebpackPlugin = require(\'optimize-css-assets-webpack-plugin\')

module.exports = {
...
 optimization: {
    // 覆盖webpack默认的优化压缩方案
    minimizer: [
      new OptimizeCssAssetsWebpackPlugin({})
    ]
  },
...
}

问题：分离并压缩css后，项目还可以开启css module ？

2，js压缩

// js压缩
const TerserWebpackPlugin = require(\'terser-webpack-plugin\')

module.exports = {
...
  optimization: {
    // 覆盖webpack默认的优化压缩方案
    minimizer: [
      new TerserWebpackPlugin({}),
    ]
  },
...
}

3，多进程打包
HappyPack

const HappyPack = require(\'happypack\')

module.exports = {
...
module: {
rules: [
 {
        test: /.js$/,
        exclude: /node_modules/,
        use: \'happypack/loader?id=happy\'
      },
]
}
...
plugins: [
    // happypack实例
    new HappyPack({
      id: \'happy\',
      loaders: [\'babel-loader\']
    })
]
}

Thread-loader

module.exports = {
...
module: {
rules: [
      {
        test: /.(js|mjs|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: \'babel-loader\',
            options: {
              presets: [\'@babel/preset-env\', \'@babel/preset-react\']
            }
          },
          /*
            开启多进程打包。
            进程启动大概为600ms，进程通信也有开销。
            只有工作消耗时间比较长，才需要多进程打包
          */
          {
            loader: \'thread-loader\',
            options: {
              // 进程数量
              workers: 2
            }
          }
        ]
      },
}
...
}

Parallel-Webpack

4，dll打包
流程：

在这里插入图片描述

代码示例：

webpack.config.js
...
 // 映射公共文件打包生成的dll文件，减少打包时间
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require(isPro ? \'./pro-dll/manifest.json\' : \'./dev-dll/manifest.json\')
    }),
    // pro环境下必须确认当前的dll文件的hash
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, isPro ? \'./pro-dll/dll.264ae4dc.js\' : \'./dev-dll/dll.js\')
    })
...

webpack.dll.config.js
...
    new webpack.DllPlugin({
      path: path.join(__dirname, `${dllPathName}`, \'manifest.json\'),
      name: \'[name]_[hash]\',
      context: __dirname
    }),
...