使用webpack4编译并压缩ES6代码的方法示例

使用webpack4编译并压缩ES6代码的方法示例：

Webpack是一个现代JavaScript应用程序的静态模块打包器，能够将多个模块打包成一个文件，适用于构建JS文件、CSS，图片等前端资源。下面是使用webpack4编译并压缩ES6代码的方法示例：

1. 安装webpack4和babel-loader

安装webpack4和babel-loader的命令如下：

npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev

1. 设置webpack配置文件

在项目根目录下创建一个webpack.config.js文件，用于Webpack的配置。配置文件需要设置入口文件、输出文件、使用的loader等内容。以下是一个简单的示例：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ]
          }
        }
      }
    ]
  }
};

在上面的配置中，我们指定了入口文件为./src/index.js，输出文件为dist/bundle.js。同时，在module中我们使用了babel-loader对js文件进行了处理。

1. 配置Babel

在上一步中我们使用了babel-loader来对js文件进行处理，但并没有指定需要使用哪些Babel插件来处理ES6语法。我们需要在项目根目录下添加一个.babelrc文件来设置。

{
  "presets": ["@babel/preset-env"]
}

在上面的配置中，我们指定了使用@babel/preset-env插件来处理ES6代码。

1. 示例说明一：将ES6代码编译成ES5

在./src/index.js文件中，我们定义了一个箭头函数，如下所示：

const sayHello = () => {
  console.log('Hello!');
};

sayHello();

直接运行该文件将会提示Uncaught SyntaxError: Unexpected token =>。这是因为浏览器并不支持箭头函数。我们需要使用Webpack和Babel将该代码编译成ES5语法。

在命令行中运行npm run build命令进行编译，编译后的代码将会在dist/bundle.js文件中。我们可以将该文件引入HTML中，然后运行查看效果。运行成功后，页面会输出Hello!。

1. 示例说明二：压缩编译后的代码

Webpack提供了UglifyJsPlugin插件，可以用于压缩编译后的代码。在webpack.config.js文件中添加插件配置：

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin()
  ]
};

配置添加后，运行npm run build打包并压缩代码。打包并压缩后的文件将会生成在dist/bundle.js中。

以上就是使用webpack4编译并压缩ES6代码的完整攻略及示例。