一：npx webpack 默认找配置文件

1、entry: “” ; // 表示入口文件

module.exports = {
  //entry: './index.js',
  //entry: ['./index.js', 'index2.js']  // 配置多个打包入口文件
  entry: {
    main: 'index.js',   // 打包后的文件名为 dist/main.js
    test: 'index.js',  // 打包后的文件名为 dist/test.js
  },
  output: {
    // 不配置filename; 如果配置；
    filename: '[name].js]'  // [name] 占位符
    path: path.resolve(__dirname, 'dist')
  }
}

2、output： 输出的打包后的文件路径

const path = require('path')
module.exports = {
  entry: './index.js', // 打包的文件路径
  output: {
    filename: 'bundle.js'    // 输出的文件名，
     path: path.resolve(__dirname, 'boudle')  // 输出的文件夹名
  }
}

3、module配置：

A：loader: 打包除了js外的配置；

1、打包jpg、png、gif等格式的图片

url-loader: 会将图片转为base64的字符串；
优点：可以减少http请求；缺点：但图片过大(Base64)占内存体积过大
file-loader：会将图片打包到一个文件下；
优点：不占体积；缺点：会多发http请求，每一个图片都会进行http请求；

const path = require('path')
module.exports = {
  // mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'boundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { // 第一条匹配规则
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            // 将图片打包到目录下
            loader: 'file-loader',  // 打包图片时使用的loader 
            options: {
              name: '[name].[ext]', // 表示使用原始的图片名
              outputPath: 'imgs/',   // 表示打包到哪个文件夹
            },
          },
        ],
      },
    ],
  },
};

module.exports = {
  // mode: 'development', 表示打包的模式，默认production模式
  entry: './src/index.js',
  output: {
    filename: 'boundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            // loader: 'file-loader',
            loader: 'url-loader',  // 以base64的格式进行打包
            options: {
              name: '[name].[ext]', // 表示使用原始的图片名
              outputPath: 'imgs/',   // 表示打包到哪个文件夹
            },
          },
        ],
      },
    ],
  },
};

2、打包css类型的文件

loader执行顺序：从后往前；从前往后

module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // 将 JS 字符串生成为 style 节点
                "css-loader", // 将 CSS 转化成 CommonJS 模块
                "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
            ]
        }]
    }

importLoaders: 2 ；表示如果在scss文件中引入别的scss表示也会使用postcss-loader和sass-loader

3、打包字体图标文件

file-loader: 打包到目标文件夹下

B：plugins插件的配置：

1、html-webpack-plugins: 打包后原来的html文件类型不变

2、clean-webpack-plugins: 打包时清除原先打包的dist目录

const HtmlWebpackPulugins = require('html-webpack-plugins');
const {CleanWebpackPlugins} = require('clean-webpack-plugins);
module.exports = {
  mode: 'development',
  // entry: 'index.js',
  // entry: ['index.js', 'index2.js'],
  entry: {  // 完整写法
  },
  output: {
    // filename: 'boudle.js', 如果不设置filename值  那么则拿entry对象中的key值作为文件名          
    path: path.resolve(__dirname, 'dist');
  },
  plugins: [
    new HtmlWebpackPlugins ({
      template: './src/index.html' // 表示打包后的原来的html的模板
    }) ,
    new CleanWebpackPlugins(),    // 表示清除原先的dist目录
  ]
}

C：打包文件名配置：

配置多个entry的key

如果配置了fileName；

module.exports = {
  entry: {
    main: 'index.js',
    test: 'index2.js', 
  },
  output: {
    publicPath: 'http://cdn.com.cn',  // 可以在各自打包引入的js文件上路径加前加上这个公共路径
    // filename: 'boundle.js',  // 会和entry配置的文件名产生冲突
    filename: '[name].js',   // 可以通过占位符打包各自key文件的js
    path: .....
  }
}

配置publicPath： 可以在各自打包引入的js文件上路径加前加上这个公共路径；

D：找到报错的位置：devtool: sourcemap 调试工具打包 错误代码提示

source-map: 会生成.map这样的文件；
inline-source-map: 会精确到某一行某一列；inline-cheap-source-map: 精确到某一行
inline-cheap-module-source-map: 也会去管理第三方模块报错的问题；哪一行；
eval : 打包速度块， 但是出现错误提示的会不完整；


.map文件是一个映射文件

最佳方案推荐；

module.exports = {
  mode: 'development', // 开发环境下
  devtool: 'cheap-module-eval-source-map'// 提示清楚，打包速度也不是很慢；不会产生.map文件
}

module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map'  // cheap 告诉哪一行出错
}                                                                            // module 告诉第三方模块哪个出错
// 会产生.map映射文件

E：开发中devServer；

1、说明： “dev”: ‘webpack-dev-serve’; 只要源代码发生变化就会看到最新的源代码执行的结果；
“watch”: “webpack —watch”; 监听源代码只要源代码发生变化就自动打包

// 本地请求： http://localhost:8080/api/yixiantong/getDatas
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: './dist', // 表示运行在服务器上的文件，
    open: true,    // 自动打开
    proxy: {    // 配置代理本地服务器， 由服务器服务器之间发起请求解决跨域问题
      '/api': {
        // 目标服务器, 发起的请求：http://study.com.cn/api/yixiantong/getDatas
         target: 'http://study.com.cn',   
        changeOrigin: true,
        pathRewrite: {  // 路径的重写
          '/api': '',  // http://study.com.cn/yixiantong/getDatas
        }
      }
    }
  }
}
axios.get('/api/yixiantong')

// 本地请求： http://localhost:8080/abc/bcd/api/yixiantong/getDatas
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: './dist', // 表示运行在服务器上的文件，
    open: true,    // 自动打开
    proxy: {    // 配置代理本地服务器， 由服务器服务器之间发起请求解决跨域问题
      '/api': {
         target: 'http://study.com.cn',   
        changeOrigin: true,
        pathRewrite: {  // 路径的重写
          // api参数接口之前的路径都替换为空
          '^/api': ''  //  http://study.com.cn/yixiantong/getDatas
        }
      }
    }
  }
}
axios.get('/api/yixiantong')

// 本地请求： https://localhost:8080/abc/bcd/api/yixiantong/getDatas
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: './dist', // 表示运行在服务器上的文件，
    open: true,    // 自动打开
    proxy: {    // 配置代理本地服务器， 由服务器服务器之间发起请求解决跨域问题
      '/api': {
         target: 'http://study.com.cn',  
        secure: false,   // 如果请i去协议为https加上
        changeOrigin: true,
        pathRewrite: {  // 路径的重写
          // api参数接口之前的路径都替换为空
          '^/api': ''  //  https://study.com.cn/yixiantong/getDatas
        }
      }
    }
  }
}
axios.get('/api/yixiantong')

二：更改默认配置文件名

1、npx webpack —config ‘path’ ; path: 默认更改后的文件路径