webpack5学习记录

第一天：webpack基础配置

const path = require('path')// nodejs的核心模块，专门用来处理路径问题

module.exports = {
  // 入口
  entry: './src/main.js',// 使用相对路径
  // 输出
  output: {
    // 输出路径
    // path.resolve  可以返回一个绝对路径，
    // __dirname  是nodejs的变量，代表当前文件的文件夹目录
    // dist 表示在这个__dirname 代表的路径下创建一个名字为dist的文件夹来存放打包后输出的文件
    path: path.resolve(__dirname, 'dist'), // 使用绝对路径
    // 文件的输出名称
    filename: 'main.js'  // 叫啥都行，不强求
  },
  // 加载器
  //  module: { rules:[] }  固定写法
  module: {
    rules: [
      // loader  的配置
      {
        test: /\.css$/,
        use: [
          // 执行顺序：从右往左，或者是从下到上
          "style-loader",// 将js中的css通过创建style标签添加到html文件中生效
          "css-loader" // 将css资源编译成commonjs的模块到js中
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',  // 将less编译成css
        ],
      },
    ]
  },
  // 插件
  plugins: [],
  // 模式:
  // 开发模式：development
  // 生成模式: production
  mode: 'development'
}

小菜鸡一个，如有不对的地方，欢迎各位大佬指正，在这里先谢谢各位大佬了