webpack4 入门，完成 react、vue、es6 极简开发环境-JavaScript中文网-JavaScript教程资源分享门户

前言

Webpack 是一个模块打包工具，可以将多个模块打包成一个文件，提高页面加载速度。在前端开发中，Webpack 已经成为了必不可少的工具。本文将介绍如何使用 Webpack4 搭建一个极简的开发环境，支持 React、Vue、ES6 等技术栈。

安装

在开始之前，我们需要先安装 Node.js 和 npm。安装完成之后，我们可以在命令行中使用以下命令来安装 Webpack4：

npm install webpack webpack-cli --save-dev

配置

在项目根目录下新建一个 webpack.config.js 文件，这个文件是 Webpack 的配置文件，用于配置入口、出口、插件等信息。下面是一个基本的配置文件：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这个配置文件定义了入口文件为 src/index.js，输出文件为 dist/bundle.js。其中 path.resolve() 方法用于获取目录的绝对路径。

支持 React

如果需要支持 React，我们需要安装 babel-loader、@babel/core 和 @babel/preset-react。babel-loader 是 Webpack 用于编译 ES6 语法的插件，@babel/core 是 Babel 的核心库，@babel/preset-react 是用于编译 React 语法的插件。

npm install babel-loader @babel/core @babel/preset-react --save-dev

在 webpack.config.js 文件中添加以下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
};

这个配置文件定义了一个规则，匹配所有以 .js 结尾的文件，排除 node_modules 文件夹，使用 babel-loader 编译这些文件，并使用 @babel/preset-react 插件编译 React 语法。

支持 Vue

如果需要支持 Vue，我们需要安装 vue-loader、vue-template-compiler 和 vue-style-loader。vue-loader 用于编译 Vue 文件，vue-template-compiler 用于编译 Vue 模板，vue-style-loader 用于加载 Vue 组件的样式。

npm install vue-loader vue-template-compiler vue-style-loader --save-dev

在 webpack.config.js 文件中添加以下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
};

这个配置文件定义了两个规则，匹配以 .vue 结尾的文件，使用 vue-loader 编译这些文件，并匹配以 .css 结尾的文件，使用 vue-style-loader 和 css-loader 加载这些文件。

支持 ES6

如果需要支持 ES6，我们需要安装 @babel/preset-env 和 babel-polyfill。@babel/preset-env 是用于编译 ES6 语法的插件，babel-polyfill 是用于支持 ES6 新特性的插件。

npm install @babel/preset-env babel-polyfill --save-dev

在 webpack.config.js 文件中添加以下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  entry: ['babel-polyfill', './src/index.js'],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

这个配置文件定义了入口文件为 babel-polyfill 和 src/index.js，使用 @babel/preset-env 插件编译 ES6 语法。

示例代码

下面是一个完整的 webpack.config.js 文件的示例代码：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: ['babel-polyfill', './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'],
          },
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
};

总结

本文介绍了如何使用 Webpack4 搭建一个极简的开发环境，支持 React、Vue、ES6 等技术栈。通过配置 webpack.config.js 文件，我们可以实现自动化打包、编译和加载。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65616161d2f5e1655db6fd1d