file-loader
安裝：
npm install --save-dev file-loader
用法：
默認(rèn)情況下获高，生成的文件的文件名就是文件內(nèi)容的MD5哈希值會(huì)保留所引用資源的原始擴(kuò)展名吻育。
//引入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
