webpack4.x实战五，JS支持ES6；CSS支持LESS，浏览器兼容

2023-09-10 12:57:35

前言

webpack是一个现代化的JavaScript应用程序构建工具。它可以将许多松散的文件模块化，并最终打包为适用于生产环境的文件。webpack4.x是webpack的最新版本，它引入了许多新特性和改进，例如对ES6的原生支持和对LESS的集成支持。

本文将详细介绍webpack4.x中JS对ES6的支持以及CSS对LESS的支持，并提供浏览器兼容性指南，以帮助您在开发过程中避免常见问题。

webpack4.x中JS对ES6的支持

webpack4.x原生支持ES6语法，这意味着您无需使用Babel或其他转换器来编译ES6代码。要使用ES6，您只需在webpack.config.js文件中配置babel-loader即可。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

配置好babel-loader后，您就可以在项目中使用ES6语法了。例如，以下代码是使用ES6语法编写的JavaScript模块：

import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello, webpack!</h1>
    </div>
  );
}

要将此模块打包成适用于生产环境的文件，您只需运行以下命令：

webpack --mode production

运行此命令后，webpack将生成一个名为“bundle.js”的文件，其中包含了打包后的ES6代码。

webpack4.x中CSS对LESS的支持

webpack4.x还原生支持LESS语法，这意味着您无需使用less-loader或其他转换器来编译LESS代码。要使用LESS，您只需在webpack.config.js文件中配置less-loader即可。

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  }
};

配置好less-loader后，您就可以在项目中使用LESS语法了。例如，以下代码是使用LESS语法编写的CSS模块：

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  font-size: 24px;
}

要将此模块打包成适用于生产环境的文件，您只需运行以下命令：

webpack --mode production

运行此命令后，webpack将生成一个名为“style.css”的文件，其中包含了打包后的LESS代码。

浏览器兼容性指南

在使用webpack4.x开发项目时，您需要考虑浏览器的兼容性问题。以下是一些需要注意的事项：

ES6支持情况： 目前，所有主流浏览器都支持ES6语法。但是，如果您想支持旧版本的浏览器，则需要使用Babel或其他转换器将ES6代码编译成ES5代码。
LESS支持情况： 目前，只有部分浏览器原生支持LESS语法。如果您想在所有浏览器中使用LESS，则需要使用less-loader或其他转换器将LESS代码编译成CSS代码。
CSS前缀： 为了使CSS代码兼容所有浏览器，您需要添加CSS前缀。例如，以下代码是添加了CSS前缀的CSS代码：

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  font-size: 24px;
}

@media (max-width: 768px) {
  body {
    background-color: #ffffff;
  }

  h1 {
    color: #000;
    font-size: 18px;
  }
}