webpack4配置优化

头像
Charon
    阅读 12 分钟

    前面我们说了webpack的一些基础，现在我们来使用webpack实际来编译写个项目。
    用vue-cli创建一个项目，然后把它的vue-cli-service以及webpack等黑盒工具移除，然后我们来自己编译它。
    首先我们要创建三个文件

    • webpack.common.js 公共的webpack配置
    • webpack.dev.js 开发阶段的配置
    • webpack.prod.js 生产阶段的配置

    首先我们来编写webpack.common文件

    const HtmlWebpackPlugin = require('html-webpack-plugin')// html模板
const webpack = require('webpack')
const PreloadWebpackPlugin = require('preload-webpack-plugin')// 预加载
const path = require('path')
const os = require('os')
const VueLoaderPlugin = require('vue-loader/lib/plugin')// vue对应插件
const workers = { // 多线程编译
  loader: 'thread-loader',
  options: {
    workers: os.cpus().length
  }
}
module.exports = {
  // entry: ['babel-polyfill', './src/main.js'],
  entry: './src/main.js', // 入口
  output: {
    filename: 'bundle.js' // 输出

  },
  optimization: {
    concatenateModules: true, // 尽可能合并模块到一个函数
    splitChunks: { // 公共代码拆分
      // include all types of chunks
      chunks: 'all'
    },
    runtimeChunk: true // 运行时代码  拆出来 缓存
  },
  resolve: {
    // modules: [//解析时搜索得模块,配了导致ie报错
    //     path.resolve(__dirname, 'node_modules'),
    // ],
    alias: { // 配置别名
      components: path.resolve(__dirname, 'src/components'),
      src: path.resolve(__dirname, 'src')
    },
    extensions: ['.js', '.json', '.vue'] // 省略后缀
  },
  module: {
    rules: [

      { // babel
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          workers,
          {
            loader: 'babel-loader',
            options: {
              // babel-polyfill按需引入,差了1m左右 core polyfill原型
              presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
              cacheDirectory: true, // 开启缓存 第二次构建时，会读取之前的缓存,吃内存，不开发了记得清下占用
              // presets: ['@babel/preset-env']
              plugins: [ // import()语法支持
                '@babel/plugin-syntax-dynamic-import'
              ]
            }
          }

        ]
      },

      {
        test: /\.(gif|png|jpe?g|svg)$/i, // 不超过10kb转为data:urlbase64
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024, // 10 KB
              name: 'image/[name]-[contenthash:8].[ext]', // 输出hash
              esModule: false
            }
          }]
      },

      {
        test: /\.vue$/, // 解析vue文件
        use: [
          workers,
          'vue-loader'
        ]
      }

    ]
  },
  plugins: [
    new PreloadWebpackPlugin({ // 加入预解析和预加载webpack4之后下载preload-webpack-plugin@next最新版
      rel: 'preload',
      as (entry) {
        console.log(entry)
        if (/\.css$/.test(entry)) return 'style'
        if (/\.woff$/.test(entry)) return 'font'
        if (/\.(png|jpe?g|gif)$/.test(entry)) return 'image'
        return 'script'
      },
      include: 'allChunks',
      fileBlacklist: [/\.(map)$/, /runtime~.+\.js$/]
      // 把runtime文件抽离出来，因为import()运行时文件变化了，runtime管理运行时babel导入文件的hash也会变化，
      // 默认webpack打包出来的依赖入口文件会把runtime导入，这样会导致它的hash也会变化，这样就会导致缓存失效，
      // 所以把runtime这个文件加载到html中，从以来入口文件中抽离，来避免依赖入口的hash变化。这样它就不需要进行预加载了。
    }),
    new HtmlWebpackPlugin({ // html模板
      title: 'Vue dev App',
      template: path.resolve(__dirname, 'public/index.html')
    }),

    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      BASE_URL: '"/"'
    })
  ]
}

    代码里都有注释，然后我们做下思路分析：

    • 确定打包形成依赖图的入口文件和输出文件名字
    • 配置别名resolve方便项目开始时快捷引入
    • 配置loader，首先解析vue文件需要vue-loader和vue-loader/lib/plugin插件,解析图片使用url-loader配置大小（10kb以下转换为base64超出的copy图片）和文件路径以及文件名contenthash:8内容级别的hash，vue的图片导入默认使用的CommonJs规范，所以标注esModule不转为esm,最后配置babel-loader转换js特性，首先下载babel-core核心模块和env编译所有新特性，指定不需要编译的文件夹，babel-polyfill配置上兼容新的api(Iterator、Generator、Set、Maps、Proxy、Reflect)，然后配置useBuiltIns按浏览器缺少的polyfill按需加载，然后配置core:3兼容 原型的方法（array.includes）（https://www.cnblogs.com/dh-dh/p/10071312.html

    ）

    • 然后我们配置了workers，在第一次编译后开启多线程打包，只对可能影响编译速度的loader添加。
    • 然后配置optimization属性，尽可能合并模块到一个函数，拆分公共代码，然后把运行时得代码拆分出来（import()的代码）
    • 然后配置插件，首先是预加载插件，html模板，vueLoader的插件，设置路径变量。

    然后再配置开发阶段配置webpack.dev

    
const { merge } = require('webpack-merge')// 合并配置插件
const common = require('./webpack.common')// 公共配置
const path = require('path')
const os = require('os')
const webpack = require('webpack')
const workers = { // 多线程编译
  loader: 'thread-loader',
  options: {
    workers: os.cpus().length
  }
}
module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  // devtool:'source-map',
  devServer: {
    hot: true,
    contentBase: path.join(__dirname, 'public'),
    open: true,
    stats: 'errors-only',
    clientLogLevel: 'none',
    disableHostCheck: true
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/, // eslint
        enforce: 'pre',
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        loader: [workers, 'eslint-loader']
      },
      {
        test: /\.less$/, // 解析引入得less
        use: [
          workers,
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.css$/, // 解析组件内部style
        use: [
          workers,
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 热加载
  ]
})
    • 这个文件很简单，我们就需要合并下公共配置，然后加一些开发阶段的特殊配置
    • 配置模式开发，配置source-map，配置devServer 服务热加载，读取资源目录
    • 配置loader，首先下载eslint相关依赖，生产eslint配置，配置eslint-loader，less和css的loader，我们这里使用了postcss以及它的相关插件

    postcss.config.js

    
const postcssConfig = {
  plugins: [ // 配合package的browserslist
    require('postcss-import'),
    require('postcss-cssnext'),
    require('cssnano')
  ]
}
console.log(process.env.NODE_ENV)
if (process.env.NODE_ENV === 'production') { // 使用postcss插件方式实现，webpack插件方式太麻烦了
  const purgecss = require('@fullhuman/postcss-purgecss')
  const purgecssConfig = require('./purgecss.config')
  postcssConfig.plugins.push(purgecss(purgecssConfig))
}
module.exports = postcssConfig

    这个里面引入了一个生产阶段对vue内部style css摇树的插件配置，配置我贴出来
    purgecss.config

    

module.exports = {
  content: ['./public/**/*.html', './src/**/*.vue'], /// / 清理范围，所有的vue component和和入口的html，js里引入的默认是全局使用的
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  whitelist: [/el-.+$/], // 将elementuijs使用上的类也放在白名单不作处理
  whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/, /el-.+$/]
}
    • 最后配置一个热加载的插件

    最后我们配置生产文件
    webpack.prod

    const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')// 打包之前清空
const CopyWebpackPlugin = require('copy-webpack-plugin')// copy文件插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 把css抽成link的方式
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')// 压缩css
const TerserWebpackPlugin = require('terser-webpack-plugin')// 压缩js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')// 匹配 runtime.chunk文件写到html中
const common = require('./webpack.common')
const path = require('path')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // webpack 打包结果分析
console.log(common)
// common.module.rules.push({
//     test: /\.(gif|png|jpe?g|svg)$/i,
//     //这个依赖下载要用 cnpm 淘宝源，并且用管理员权限下载,下不下来把依赖都删了，然后重新下载，其他都下不来，亲身经历
//    //算了不用它了，通过它压缩过后的图片包括base64，在ie中不能解析
//     loader: 'image-webpack-loader',
//     options: {
//         mozjpeg: {
//             progressive: true,
//         },
//         // optipng.enabled: false will disable optipng
//         optipng: {
//             enabled: false,
//         },
//         pngquant: {
//             quality: [0.65, 0.90],
//             speed: 4
//         },
//         gifsicle: {
//             interlaced: false,
//         },
//         // the webp option will enable WEBP
//         webp: {
//             quality: 75
//         }
//     }
// })
module.exports = merge(common, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].bundle.js', // 输出name hash
    chunkFilename: '[name].[contenthash:8].chunk.js' // chunk文件 hash
  },
  devtool: 'none',
  module: {
    rules: [
      {
        test: /\.(less)$/,
        use: [
          MiniCssExtractPlugin.loader, // 生成环境，最后不适用style插入，使用link方式插入
          // 'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
      {
        test: /\.css$/, // 解析组件内部style
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true// 开启多线程
      }), // 压缩js
      new OptimizeCssAssetsWebpackPlugin({
        cssProcessPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }]
        }
      }) // 压缩css
    ],

    // 模块只导出被使用的成员
    usedExports: true,
    sideEffects: true // 标记无副作用，配合package js摇树使用
  },
  plugins: [

    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Vue prod App',
      template: path.resolve(__dirname, 'public/index.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new MiniCssExtractPlugin({ // 生成link的css文件,名称hash
      filename: '[name].[contenthash:8].css'
    }),
    new CopyWebpackPlugin([ // 复制文件
      'public'
    ]),
    new ScriptExtHtmlWebpackPlugin({ // 写入html中
      inline: [/runtime~.+\.js$/] // 正则匹配runtime文件名
    }),

    new BundleAnalyzerPlugin() // webpack打包结果分析

  ]
})
// css摇树使用postcss插件实现了
    • 老样子配置模式，和输出地址，这会的文件名称就需要用到contenthash文件级别的hash生成，方便我们做浏览器缓存（chunkFilename 文件的名字也做了hash）。
    • 去除source-map
    • 配置css相关loader最后转换的时候我们不使用style-loader方式用style标签插入，而是使用link文件生成css文件引入
    • optimization配置压缩js和css，usedExports标识导出使用的模块，标记sideEffects无副作用配合package文件标识部分右副作用文件，来完成js摇树
    • 最后就是插件，清空文件夹，html模板，生成css文件（不支持热加载，生产阶段使用，该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况）,复制文件，然后把runtime开头的管理(import()babel)异步管理导入的文件，写入到html中（为什么这样common配置里有写,webpack相关的runtimeChunk又讲相关知识）。上线优化方案
    • 最后就是添加一个webpack结果打包分析的插件

    babel.config.js我们有一个兼容[vue-cli的浏览器兼容babel的配置]

    module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

    最后贴的就是package.json

    {
  "name": "vue-app-base",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
    "lint": "eslint --ext .js,.vue src/",
    "all-lint-fix": "eslint --fix --ext .js,.vue src/",
    "precommit": "lint-staged"
  },
  "dependencies": {
    "core-js": "3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.12.7",
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "@vue/cli-plugin-babel": "^4.5.9",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "eslint": "^7.14.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-vue": "^7.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "husky": "^4.3.0",
    "image-webpack-loader": "^7.0.1",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "lint-staged": "^10.5.2",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^8.1.10",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.1.0",
    "preload-webpack-plugin": "^3.0.0-beta.4",
    "script-ext-html-webpack-plugin": "^2.1.5",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "2.2.1",
    "thread-loader": "^3.0.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^4.1.0",
    "webpack-cli": "3.3",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^5.4.0"
  },
  "lint-staged": {
    "src/**/*.(js|vue)": [
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "IE 10"
  ],
  "sideEffects": [
    "*.css",
    "*.less",
    "*.vue"
  ]
}

    这样就配置完成了，这一套配置其实去除掉vue相关的就是一套通用配置。
    做下webpack 的loader和plugin区别

    • loader: loader虽然是扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。
      loader是运行在NodeJS中。
      仅仅只是为了打包，仅仅只是为了打包，仅仅只是为了打包，重要 的话说三遍！！！
    • plugin：plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

    b53923b5061b105189afce540edbb43.png

    webpack的执行流程我们可以直接来参考这张图来看。

    webpack
    Charon
    57 声望16 粉丝

    世界核平

    « 上一篇
    前端工程化(webpack-eslint)
    下一篇 »
    vue-router简易源码解析(3-1-1)

    引用和评论

    推荐阅读
    头像
    react 架构大概流程

    Charon赞 1阅读 1.9k

    头像
    JS工程化集锦

    specialcoder赞 2阅读 2.3k

    头像
    compression-webpack-plugin项目加载优化+nginx配置

    灰太狼的情与殇阅读 1.9k

    头像
    umi 4 踩坑

    assassin_cike阅读 1.5k

    头像
    axios-api，js结构化定义、调用业务api接口。

    xachary阅读 1.3k

    头像
    webpack多页面打包的一次尝试

    hyfhao阅读 385

    头像
    Vite VS Webpack，谁才是最强构建工具

    倔强青铜三赞 1阅读 380

    0 条评论
    得票最新