file-loader和url-loader

file-loader

安装：

npm install --save-dev file-loader

用法：

默认情况下，生成的文件的文件名就是文件内容的MD5哈希值会保留所引用资源的原始扩展名。

//引入node核心模块

const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

    //mode: 'production',

    mode: 'development',

    //entry: './src/index.js',

    entry: {

        main: './src/index.js'

    },

    output: {

        filename: 'bundle.js',

        path:  path.resolve(__dirname,'dist')

    },

    module: {

        rules: [

            {

                test: /\.css$/i,

                use: {

                    loader: 'css-loader',

                }

            },

            {

                test: /\.(png|jpe?g|gif)$/,

                use: {

                    loader: 'url-loader',

                    options: {

                        name: '[name]_[hash].[ext]',

                        outputPath: 'images/',

                        limit: 2048,

                    }

                }

            },

            {

                test: /\.vue$/,

                use: {

                    loader: 'vue-loader',

                }

            }

        ]

    },

    plugins: [

        // make sure to include the plugin for the magic

        new VueLoaderPlugin()

    ],

}

url-loader

npm install --save-dev url-loader