webpack入门——loader

// 引入核心模块
const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'production', //打包后是压缩的代码
  // mode: 'development',  //打包后是不压缩的代码
  // entry: './src/index.js',  //写法1，打包哪个文件，打包文件入口
  entry: {
    main:'./src/index.js',  //写法2，打包哪个文件，打包文件入口
  },
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader'
      }
    },{
      test: /\.vue$/,
      use: {
        loader: 'vue-loader'
      }
    }]
  },
  output:{  //把打包好的文件
    filename:'bundle.js',  //打包好的文件叫什么名字
    path: path.resolve(__dirname,'dist') //打包好的文件放在哪个文件夹下，要跟一个绝对路径，__dirname代表的是webpack.config.js所在的当前目录的路径
  }
}

3.引入要打包的图片
这是我src下放的一张图片，打包后在dist文件夹下的index.html下引入我打包的文件bundle.js便可看到图片

4.进行webpack打包，我在package.json配置的是运行npm run bundle打包，打包之后就可以在页面上看到对应的图片了