526互联

webpack4

发布时间 2023-05-26 17:16:14作者: 提莫一米五呀

webpack4

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

使用

  • 初始化 package.json
    npm init
  • 下载并安装 webpack
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production
功能：在开发配置功能上多一个功能，压缩代码。

  • 问题
    不能编译打包 css、img 等文件。
    不能将 js 的 es6 基本语法转化为 es5 以下语法。

开发环境的基本配置

打包样式资源

  • 下载安装 loader 包
    npm i css-loader style-loader less-loader less -D
  • 修改配置文件
module: {
  rules: [
    // 详细 loader 配置
    // 不同文件必须配置不同 loader 处理
    {
      // 匹配哪些文件
      test: /\.css$/,
      // 使用哪些 loader 进行处理
      use: [
        // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行
        // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
        'style-loader',
        // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
        'css-loader'
      ]
    }
  ]
},

打包 HTML 资源

  • 下载安装 plugin 包
    npm install --save-dev html-webpack-plugin
  • 修改配置文件
plugins: [
  // plugins 的配置
  // html-webpack-plugin
  // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）
  // 需求：需要有结构的 HTML 文件
  new HtmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
    template: './src/index.html'
  })
],

打包图片资源

  • 下载安装 loader 包
    npm install --save-dev html-loader url-loader file-loader
  • 修改配置文件
module: {
rules: [
    {
      // 问题：默认处理不了 html 中 img 图片
      // 处理图片资源
      test: /\.(jpg|png|gif)$/,
      // 使用一个 loader
      // 下载 url-loader file-loader
      loader: 'url-loader',
      options: {
        // 图片大小小于 8kb，就会被 base64 处理
        // 优点: 减少请求数量（减轻服务器压力）
        // 缺点：图片体积会更大（文件请求速度更慢）
        limit: 8 * 1024,
        // 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs
        // 解析时会出问题：[object Module]
        // 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析
        esModule: false,
        // 给图片进行重命名
        // [hash:10]取图片的 hash 的前 10 位
        // [ext]取文件原来扩展名
        name: '[hash:10].[ext]'
      }
    },
    {
      test: /\.html$/,
      // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理）
      loader: 'html-loader'
    }
  ]
},

打包其他资源

module: {
  rules: [
    // 打包其他资源(除了 html/js/css 资源以外的资源)
    {
      // 排除 css/js/html 资源
      exclude: /\.(css|js|html|less)$/,
      loader: 'file-loader',
      options: {
        name: '[hash:10].[ext]'
      }
    }
  ]
}

devserver

devServer: {
  // 项目构建后路径
  contentBase: resolve(__dirname, 'build'),
  // 启动 gzip 压缩
  compress: true,
  // 端口号
  port: 3000,
  // 自动打开浏览器
  open: true
}

运行指令: npx webpack-dev-server

生产环境的基本配置

提取 css 成单独文件

  • 下载插件
    npm install --save-dev mini-css-extract-plugin
  • 修改配置文件
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        // 创建 style 标签，将样式放入
        // 'style-loader',
        // 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
        MiniCssExtractPlugin.loader,
        // 将 css 文件整合到 js 文件中
        'css-loader'
      ]
    }
  ]
},
plugins: [
  new MiniCssExtractPlugin({
    // 对输出的 css 文件进行重命名
    filename: 'css/built.css'
  })
]

css 兼容性处理

  • 下载 loader
    npm install --save-dev postcss-loader postcss-preset-env
  • 修改配置文件
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
          ident: 'postcss',
          plugins: () => [
              // postcss 的插件
              require('postcss-preset-env')()
            ]
          }
        }
      ] 
    }
  ]
},
  • 修改 package.json
"browserslist": {
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ],
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

压缩 css

  • 下载安装包
    npm install --save-dev optimize-css-assets-webpack-plugin
  • 修改配置文件
plugins: [
  // 压缩 css
  new OptimizeCssAssetsWebpackPlugin()
]

js 语法检查

  • 下载安装包
    npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
  • 修改配置文件
module: {
  rules: [
    /*
    注意：只检查自己写的源代码，第三方的库是不用检查的
    airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
    */
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        // 自动修复 eslint 的错误
        fix: true
      }
    }
  ]
}
  • 配置 package.json
"eslintConfig": {
  "extends": "airbnb-base",
  "env": {
    "browser": true 
  }
}

js 兼容性处理

  • 下载安装包
    npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
  • 修改配置文件
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        // 预设：指示 babel 做怎么样的兼容性处理
        presets: [
          [
            '@babel/preset-env',
            {
              // 按需加载
              useBuiltIns: 'usage',
              // 指定 core-js 版本
              corejs: {
                version: 3
              },
              // 指定兼容性做到哪个版本浏览器
              targets: {
                chrome: '60',
                firefox: '60',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]
        ]
      }
    }
  ]
}

js 压缩

  • 修改配置文件
// 生产环境下会自动压缩 js 代码
mode: 'production'

HTML 压缩

  • 修改配置文件
plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    // 压缩 html 代码
    minify: {
      // 移除空格
      collapseWhitespace: true,
      // 移除注释
      removeComments: true
    }
  })
]

优化配置