webpack基本使用

sym001
45 阅读5分钟

本篇内容主要汇总webpack的基本使用，包括安装配置、dev-server、解析ES6、解析样式、解析图片文件、常见loader和plugin。在面试过程中，往往会考量webpack是否配置过，能说出每个配置过程的重点部分即可。

一、安装和配置 —— 拆分 dev prod 配置，然后 merge

Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个文件。下面是Webpack的安装和配置步骤：

1.安装Webpack：可以使用npm或yarn进行安装，命令如下：

npm install webpack webpack-cli --save-dev

或

yarn add webpack webpack-cli --dev

2.创建Webpack配置文件：在项目根目录下创建一个名为webpack.config.js的文件。

3.配置Webpack：在webpack.config.js文件中配置Webpack，包括入口文件、输出文件、模块加载器、插件等。

4.拆分dev和prod配置：通常情况下，我们需要为开发环境和生产环境分别配置Webpack，可以分别创建dev.config.js和prod.config.js两个配置文件。

5.使用webpack-merge插件合并配置：在生产环境中，我们通常需要对开发环境中的配置进行一些修改，可以使用webpack-merge插件将dev.config.js和prod.config.js合并成一个配置文件。

下面是一个简单的Webpack配置示例：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

这个配置文件定义了入口文件、输出文件、模块加载器和插件。在开发环境和生产环境中，我们可以分别创建dev.config.js和prod.config.js文件，然后使用webpack-merge插件将它们合并成一个配置文件。

// dev.config.js
const { merge } = require('webpack-merge');
const config = require('./webpack.config');

module.exports = merge(config, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

// prod.config.js
const { merge } = require('webpack-merge');
const config = require('./webpack.config');

module.exports = merge(config, {
  mode: 'production',
  output: {
    filename: 'bundle.[contenthash].js'
  }
});

在生产环境中，我们修改了输出文件的文件名，并且使用了contenthash来保证文件名的唯一性。同时，我们还可以添加一些其他的插件和配置来优化生产环境的打包结果。

二、配置本地服务和代理

配置本地服务和代理是前端开发中非常常见的一项工作。下面我将介绍如何使用webpack-dev-server来配置本地服务和代理。

首先，你需要安装webpack-dev-server。可以使用以下命令进行安装：

npm install webpack-dev-server --save-dev

然后，在webpack配置文件中进行如下配置：

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000,
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {'^/api' : ''}
    }
  }
}

这里的contentBase指定了静态文件的目录，compress开启gzip压缩，port指定了本地服务的端口号。

proxy是用来配置代理的，这里的配置表示将所有以/api开头的请求都代理到http://localhost:3000上，并且去掉/api前缀。

这样配置后，你就可以在本地启动一个服务，并且使用代理来访问后端接口了。

三、处理ES6

ES6是JavaScript的一个重要版本，它引入了很多新的语法和特性。为了让浏览器能够正确解析ES6代码，我们需要使用Babel来将ES6代码转换成ES5代码。

以下是使用Babel处理ES6的步骤：

  1. 安装Babel相关的依赖：
npm install --save-dev @babel/core @babel/cli @babel/preset-env

2. 在项目根目录下创建.babelrc文件，并配置Babel的预设：

{
  "presets": ["@babel/preset-env"]
}
  1. 在webpack配置文件中对JS文件进行处理：
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

这里的babel-loader是用来处理JS文件的loader，它会自动调用Babel来将ES6代码转换成ES5代码。

  1. 在package.json中添加一个脚本命令，用来启动Babel：
{
  "scripts": {
    "build": "babel src -d dist"
  }
}

这里的src是源代码目录，dist是转换后的代码目录。

  1. 运行npm run build命令，Babel会将src目录下的ES6代码转换成ES5代码，并输出到dist目录中。

这样就可以使用Babel来处理ES6代码了。

四、处理样式

在Webpack中处理样式通常需要使用对应的loader来处理不同的样式文件类型，以下是一个简单的Webpack配置文件示例，用于处理CSS和Sass样式文件：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

上述配置文件中，我们使用了两个loader：css-loader和sass-loader，用于处理CSS和Sass样式文件，同时使用了MiniCssExtractPlugin插件，用于将样式文件提取为独立的CSS文件。

其中，css-loader用于处理CSS文件，将CSS文件转换为JS模块，并解析其中的依赖关系，sass-loader用于处理Sass文件，将Sass文件转换为CSS文件。MiniCssExtractPlugin用于将CSS文件提取为独立的文件，并设置文件名和路径。

在使用Webpack处理样式时，还需要注意以下几点：

  1. loader的顺序很重要，需要按照从右到左的顺序依次执行。

  2. 使用MiniCssExtractPlugin插件提取CSS文件时，需要在plugins中添加对应的配置。

  3. 如果需要使用CSS模块化，可以在css-loader中添加modules选项。

  4. 如果需要使用PostCSS等工具对CSS进行后处理，可以在loader中添加对应的插件。

五、处理图片

在Webpack中处理图片的方法有两种：使用URL Loader和使用file-loader。

  1. 使用URL Loader

URL Loader是Webpack中的一个loader，可以将图片转换为base64编码的URL字符串，然后将其嵌入到JavaScript或CSS文件中。这样可以减少HTTP请求的数量，提高页面加载速度。

在Webpack配置文件中，可以使用以下代码配置URL Loader：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192, // 图片大小小于8KB时，将图片转换为base64编码的URL字符串
            name: '[name].[ext]', // 输出文件名为原始文件名
            outputPath: 'images' // 输出文件路径为dist/images
          },
        },
      ],
    },
  ],
},
  1. 使用file-loader

file-loader可以将图片复制到输出目录，并返回该图片的URL。在Webpack配置文件中，可以使用以下代码配置file-loader：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]', // 输出文件名为原始文件名
            outputPath: 'images' // 输出文件路径为dist/images
          },
        },
      ],
    },
  ],
},

这两种方法都可以处理图片，选择哪种方法取决于你的需求。如果你的图片比较小，可以选择使用URL Loader将图片转换为base64编码的URL字符串。如果你的图片比较大，可以选择使用file-loader将图片复制到输出目录。

六、常见的loader和plugin

Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个bundle文件，以方便在浏览器中使用。在Webpack中，Loader和Plugin是两个核心概念，它们可以帮助我们对模块进行处理和优化。

常见的Loader有：

  1. css-loader：用于加载CSS文件，并且支持模块化和压缩等功能。
  2. style-loader：将CSS代码插入到HTML文件的标签中。
  3. babel-loader：用于将ES6+的代码转换成ES5的代码，以便在低版本浏览器中运行。
  4. file-loader：用于加载图片、字体等文件，并返回文件路径。
  5. url-loader：与file-loader类似，但可以将小图片转换成base64编码，以减少HTTP请求。

常见的Plugin有：

  1. HtmlWebpackPlugin：用于生成HTML文件，并自动引入打包后的JS和CSS文件。
  2. CleanWebpackPlugin：用于清空打包目录，以便重新生成打包文件。
  3. UglifyJsPlugin：用于压缩JS代码，以减少文件大小。
  4. ExtractTextWebpackPlugin：用于将CSS代码提取到单独的文件中，以便浏览器可以缓存CSS文件。
  5. DefinePlugin：用于定义全局变量，以便在代码中使用。

以上是常见的Loader和Plugin，当然还有很多其他的Loader和Plugin，可以根据实际需求选择使用。

avatar
文章
阅读
粉丝