配置处理图片的file-loader的问题

require: 动态引入图片

  1. 动态引入图片地址在vue中
  2. <img :src="require('./test.jpg')"/>  
  3. ------------------------------------------
  4. <img :src=" './test.jpg' "/>  找不到图片地址

file-loader: 会默认打开esModule; 需手动关闭
简而言之就是file-loader新版本默认使用了esModule语法，造成了引用图片文件时的方式和以前的版本不一样，
image.png

const HtmlWebpackPlugin = require("html-webpack-plugin"),
      {resolve} = require('path'),
      // vue2.0  @15.7.0     15版本
      // VueLoaderPlugin = require('vue-loader/lib/plugin');
      // vue3.0
      {VueLoaderPlugin} = require('vue-loader'); 
      const autoprefixer = require('autoprefixer');
/**
 * vue2.6   npm  i vue-loader@15.7.0 -D
 * vue3.2   npm i vue-loader@next -D
*/
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'dist'),
  },
  externals: {
    vue: 'Vue', // 打包外部cdn引入的文件
  },
  resolve: {  // 忽略引入文件的后缀名
    extensions: ['.js', '.jsx', '.vue'],
    // 设置别名：
    alias: {
      '@': resolve(__dirname, './src')// 绝对路径拼接
    }
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          // loader配置项
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                    autoprefixer({
                    overrideBrowserslist: ['>1%', 'last 2 versions'],
                  }),
                ],
              },
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html'),
    }),
  ],
};

{
  "name": "16.rollup-mobanbianyi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "rollup": "^2.26.11",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-serve": "^1.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5"
  },
  "scripts": {
    "dev": "rollup -c -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <!-- <script src="https://unpkg.com/vue@3.2.1/dist/vue.global.js"></script> -->
  <!--  -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

</body>
</html>

externals配置不写，weboack不会对引入的Vue进行打包 image.png externals: { 'vue': 'Vue'}, 表示将 <script src="./cdn.vue">全局引用的文件，在main模块下的js文件可以通过 require('vue') 的形式进行访问变量

image.png

const HtmlWebpackPlugin = require('html-webpack-plugin'),
  // vue3版本 vue-loader@16.5.0
  // 处理单文件组件 @vue/compiler-sfc@3.1.2
  // {VueLoaderPlugin} = require('vue-loader'),

  // vue2版本  vue-loader@15.7.0
  // "vue-template-compiler": "^2.6.14"
  VueLoaderPlugin = require('vue-loader/lib/plugin'),
  { resolve } = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js',
  },

  // 
  resolve: {
    // 忽略文件后缀名
    extensions: ['.js', '.vue', '.jsx']
  },
  // 打包外部引入的cdn包
  externals: {
    'vue': 'Vue',
  },
  // 调试工具
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.vue$/i,
        loader: 'vue-loader'
      },
      {
        test: /\.scss$/i,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html')
    })
  ]
}

{
  "name": "20.directive-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.1.2",
    "css-loader": "^4.3.0",
    "html-webpack-plugin": "^4.5.0",
    "sass": "^1.45.2",
    "sass-loader": "^10.1.1",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}