webpack 静态资源集中输出的方法示例

下面是详细讲解“webpack 静态资源集中输出的方法示例”的完整攻略。

什么是静态资源集中输出？

静态资源指的是网页中不需要经过服务器处理直接能被使用的文件，包括但不限于 CSS、JS 文件、图片文件。静态资源集中输出是指在打包构建时将这些文件从各自的模块中提取出来，集中输出到指定的目录中，以单独文件的形式发挥作用。

webpack 静态资源集中输出的方法

webpack 有一个插件 CopyWebpackPlugin，可以将文件或者目录复制到指定的目录中，我们可以利用这个插件来集中输出静态资源。

示例一

我们先新建一个基于 webpack 的工程，然后在项目中新增一个目录： static，放入一张图片素材 rocket.png，现在需要将 rocket.png 复制到打包编译后的目录 dist/static/img 中。

下面是 webpack.config.js 的配置代码：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './static', to: 'static' }
      ]
    })
  ]
};

这里我们使用 CopyWebpackPlugin，它可以接收一个 patterns 的参数，是一个数组，每个数组成员都是一个对象，该对象的 from 属性表示需要拷贝的文件或者目录路径，to 属性表示拷贝到哪个目录下面。

运行 webpack，可以看到在 dist 目录下，多了一个 static/img/rocket.png。

示例二

现在，我们需要压缩 CSS 文件，并将压缩后的文件输出到 dist/static/css 目录下。

其中，我们可以使用一个压缩 CSS 的插件 mini-css-extract-plugin。

在 webpack 的配置文件中做如下修改：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './static', to: 'static' }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash:8].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
};

这里我们新增加了一个插件 MiniCssExtractPlugin，它可以将 CSS 文件从 JS 中提取出来，并输出到一个单独的 CSS 文件中。

使用 MiniCssExtractPlugin 需要指定一个 loader，这里我们将 MiniCssExtractPlugin.loader 放在 css-loader 前面，用于提取 CSS。

运行 webpack，可以看到在 dist 目录下，多了一个 static/css/bundle.css。

总结

以上就是简要的 webpack 静态资源集中输出方法示例攻略，我们可以利用 CopyWebpackPlugin 和 MiniCssExtractPlugin 插件来将静态资源集中输出，使得打包构建后的项目更加规范和整洁。