webpack成长指北第5章---webpack的基础配置

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  entry: './index.js', // 指定当前目录的index.js为打包的入口文件
  output: {
    filename: 'main.js', // 打包后输出的打包文件的文件名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  entry: {
  main: './index.js', // 指定当前目录的index.js为打包的入口文件
                      // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
  },
  output: {
    filename: 'main.js', // 打包后输出的打包文件的文件名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
    sub: './sub.js', // 可以有多个入口文件，指定当前目录的sub.js为打包的入口文件
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名,写成[name]的形式，生成的文件名会和entry的Chunk Name同名
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
  }
}

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                        // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: '/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
    // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
  }
}

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
  
  module.exports = {
    entry: {
      main: './index.js', // 指定当前目录的index.js为打包的入口文件
                          // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
    },
    mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                           // development默认配置了sourcemap
                           // development默认无tree shaking配置，需要额外配置
    output: {
      filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
      path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                             // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                             // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                             // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
      publicPath: '/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                            // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                            // （文件引用路径就是看这个）
                            // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                            // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
      // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置
    }
  }