import data from './demo.json';
// 引入非js,json资源，进行打包会报错，所以需要通过loader来使webpack可以打包非js，json的资源。
// import "./index.css";
console.log("=========", "我是index.js文件");
console.log(data)
// webpack ./src/index.js -o ./build/built.js --mode=development 
// 打包js,json文件不会报错

// 处理css文件
{
  // 这里表示匹配的文件，都需要通过该loader转化。
  test: /.css$/,
    // 需要使用到的loader,从后往前执行
    use: [
      // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效 。
      'style-loader',
      // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串 。
      'css-loader'
    ]
},

// 处理sass文件
{
  test: /.scss$/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
}

// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

// 方式一
 {
   test: /.(jpe?g|png|svg|gif)/i,
     type: 'asset/resource',
 },
// 方式二
  // 这个是处理样式中引入的图片资源
  {
    test: /.(png|gif|jpg|jpeg)/,
      use: [
        {
          loader: "url-loader",
          options: {
            // 优点: 减少请求数量（减轻服务器压力） // 缺点：图片体积会更大（文件请求速度更慢） 
            limit: 8 * 1024, // 指定图片最大多少时转为base64格式。就是小于这个就被转化
            name: '[name].[hash:10].[ext]',// 重命名文件
            outputPath: 'static/img',// 文件的输出位置
            esModule: false, // 这里需要将esModule关闭，因为他与commonjs模块化冲突
          }
        }
      ],
        type: 'javascript/auto'
  },

// 这个是处理html中引入的图片资源
{
  test: /.html$/,
    loader: 'html-loader'
}

// 打包其他资源(除了 html/js/css 资源以外的资源) 
{ // 排除 css/js/html 资源 
  exclude: /.(css|js|html|sass|json|png|gif|jpg|jpeg)$/,
    loader: 'file-loader',
      options: { name: '[hash:10].[ext]' }
}

const { resolve } = require("path")
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // 处理css文件
      {
        // 这里表示匹配的文件，都需要通过该loader转化。
        test: /.css$/,
        // 需要使用到的loader,从后往前执行
        use: [
          // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效 。
          'style-loader',
          // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串 。
          'css-loader'
        ]
      },
      // 处理sass文件
      {
        test: /.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      // 处理图片 方式一
      // {
      //   test: /.(jpe?g|png|svg|gif)/i,
      //   type: 'asset/resource',
      // },
      // 这个是处理样式中引入的图片资源 方式二
      {
        test: /.(png|gif|jpg|jpeg)/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8 * 1024,
              name: '[name].[hash:10].[ext]',
              outputPath: 'static/imgs',
              esModule: false,
            }
          }
        ],
        type: 'javascript/auto'
      },
      // 这个是处理html中引入的图片资源
      {
        test: /.html$/,
        loader: 'html-loader'
      },
      // 打包其他资源(除了 html/js/css 资源以外的资源) 
      { 
        // 排除上面处理后的文件资源
        exclude: /.(css|js|html|sass|json|png|gif|jpg|jpeg)$/,
        loader: 'file-loader',
        options: { name: '[hash:10].[ext]', outputPath: "static/others" }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 使用的模式
  mode: 'development',
  devServer: { 
      // 项目构建后路径 。当我们在打包后的资源中，引入的文件中，未能在打包后的资源中找到，就会在contentBase指定的文件夹中查找。在开发阶段方便打包。不需要使用copyWebpackPlugin插件将资源复制到打包后的资源中。
    contentBase: resolve(__dirname, 'build'),
    // 启动 gzip 压缩 
    compress: true,
    // 端口号 
    port: 3000,
    // 自动打开浏览器 
    open: true
  }
}