玖叶教程网

webpack5

上一节的目录如下所示：

webpack-template
  |- build
    |- webpack.common.js
    |- webpack.dev.js
    |- webpack.prod.js
  |- public
    |- index.html
  |- src
    |- index.js
  |- package.json 
  |- postcss.config.js
  |- yarn.lock

这一节继续介绍其它静态资源的配置，比如图片、音频等。

1、安装url-loader

$ yarn add url-loader -D

2、使用url-loader配置这些静态资源即可

// build/webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, '../src/index.js'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[contenthash:8].js',
        clean: true
    },
    plugins: [
        // 生成html模版
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.ejs'),
            title: 'webpack 模版'
        }),
        // 抽离css
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].[contenthash].css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.(scss|sass)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/, //加载图片资源
                loader: "url-loader",
                type: 'javascript/auto', //解决asset重复
                options: {
                    esModule: false, //解决html区域,vue模板引入图片路径问题
                    limit: 1000,
                    name: "static/img/[name].[hash:7].[ext]",
                },
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //加载视频资源
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "static/media/[name].[hash:7].[ext]",
                },
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, //加载字体资源
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "static/fonts/[name].[hash:7].[ext]",
                },
            },
        ]
    }
}

后续如果有新的静态资源，可以直接在后面填上即可。