Webpack重要知识点快速汇总

Webpack 重要知识点快速汇总

Webpack 已经是前端打包构建的不二选择
每日必用，面试必考
webpack是一个成熟的工具，重点在于配置和使用，原理并不高优

---

一、基本配置

安装配置

yarn add webpack webpack-cli -D

hash是为了前端在代码不变的情况下命中缓存，从本地读取，提高速度

mode: 'production',
entry: path.join(srcPath, 'index.js'),
output: {
   
  path: distPath,
  filename: '[contenthash:8].js',
}

dev-server

yarn add webpack-dev-server

devServer: {
   
  port: 9000,
  progress: true, // 显示打包进度
  contentBase: distPath, // 根目录
  open: true, // 自动打开浏览器
  compress: true, // 启动 gzip 压缩

  // 设置代理
  proxy: {
   
    // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
    '/api': 'http://localhost:3000',

    // 将本地 /api2/xxx 代理到 localhost:3000/xxx
    '/api2': {
   
      target: 'http://localhost:3000',
      pathRewrite: {
   
        '/api2': ''
      }
    }
  }
}

配置package.json中的scripts

注意：在webpack4以后版本中，webpack-dev-server无法指定配置文件，可以替换使用webpack/server

"scripts": {
   
  "dev:build": "webpack --config build-base-conf/webpack.dev.js",
  "dev": "webpack serve --config build-base-conf/webpack.dev.js",
  "build": "webpack --config build-base-conf/webpack.prod.js"
}

解析ES6

yarn add @babel/core @babel/preset-env babel-loader

{
   
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  options: {
   
    presets: ['@babel/preset-env']
  }
}

解析样式

yarn add style-loader css-loader postcss-loader autoprefixer less-loader less

{
   
  test: /\.(css)$/,
  use: ['style-loader', 'css-loader', 'postcss-loader'] // postcss-loader 处理 css 的兼容性问题
},
{
   
  test: /\.(less)$/,
  use: ['style-loader', 'css-loader', 'less-loader']
}

postcss-loader的配置文件 postcss.config.js

module.exports = {
   
  plugins: [require('autoprefixer')]
}

解析图片文件

yarn add file-loader url-loader

生产模式：

// 图片，考虑 base64 编码的情况
{
   
  test: /\.(png|jpg|jpeg|gif)$/,
  use: [
    {
   
      loader: 'url-loader',
      options: {
   
        // 小于 5kb 的图片用 base64 格式产出，否则依然沿用 file-loader 的形式，产出 url
        limit: 5 * 1024,
        outputPath: '/img/',
      }
    }
  ]
}

开发模式：

// 直接引入图片URL
{
   
  test: /\.(jpg|jpeg|png|gif)$/,
  loader: 'file-loader'
}

模块化

webpack 本身默认支持模块化

常见loader和plugin

---

二、高级特性

webpack基本配置只能做demo，不能做线上项目。面试考察基本配置，只是为了快速判断你是否用过webpack。以下高级配置，也是通过面试的必要条件

多入口

SPA - 单页应用
但有时候也需要多页应用，就得打包多入口

entry: {
   
  index: path.join(srcPath, 'index.js'),
  other: path.join(srcPath, 'other.js')
},
output: {
   
  path