webpack配置02

加载picture文件

webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。

• asset/resource 将资源分割为单独的文件，并导出url。
• asset/inline 将资源导出为dataURL（url(data:)）的形式，
• asset/source 将资源导出为源码（source code）.
• asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）.

module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset'
      }
    ]
  }

加载vue文件

1. install 包

npm i vue@2   	// vue@2 vue2.x版本
npm i vue-loader  		// 编译vue文件
npm i vue-template-compiler		// template模板编译

2.在webpack.config.js中配置vue-loader

module: {
	rules: [
		{
			test: /\.css$/i,
			use: ['style-loader', 'css-loader']
		},
		{
			test: /\.vue$/i,
			use: ['vue-loader']
		},
		{
			
		}
	]
}

3.在webpack.config.js中配置 VueLoaderPlugin

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

module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
}

4.创建vue单文件组件

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
    }
  },
}
</script>

<style>
.example {
  color: red;
}
</style>

5.在main.js中导入 Vue 单文件组件 并渲染

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (m) => m(App)
}).$mount('#app')

定位源文件配置