入口/出口

npx 打包，使用 npm init -y 进行初始化(也可以使用 yarn)。要使用 webpack，那么必然需要安装 webpack、webpack-cli:

1.
    const path = require('path');
    module.exports = {
      // 入口文件路径
      entry: './path/to/my/entry/file.js',
      // 出口
      output: {
        // 打包后引入文件的前缀
        publicPath: 'http://cdn.xxx.com'
        // 打包文件输出的路径
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件名字
        filename: 'main.js',
      }
    };
    
2.
     module.exports = {
      // 入口文件路径
      entry: {
          // 打包后的文件名字
          text: './path/to/my/entry/file.js'
      },
      // 出口
      output: {
        // 打包文件输出的路径
        path: path.resolve(__dirname, 'dist'),
      },
    };

3.
     module.exports = {
      // 入口文件路径
      entry: {
          // 打包后的文件名字(多个文件)
          main: './path/to/my/entry/file.js'
          text: './path/to/my/entry/file.js'
      },
      // 出口
      output: {
        // 打包文件输出的路径
        path: path.resolve(__dirname, 'dist'),
        filename：'[name].js'
      },
    };
复制代码

loader：

处理不同类型的文件打包js文件以外的模块：

// 图片：
// file-loader：打包图片，单独文件
// url-loader：打包图片，单独文件，base64格式，可配置：
// base64格式：不生成图片文件，图片过大，打包文件大，页面加载时间长，未加载完图片为空白

// 样式
// style-loader：生成html中的style标签样式
// css-loader: 处理样式引用关系

// css-loader模块化： 
// import style from './index.css'
// index.css 中的样式保存在style这个变量中
// 添加类名：div.calssNmae = style.item
// 配置：
// {
//     loader: 'css-loader',
//     opstions: {
//      module: true
// }
// }

// postcss-loader: 处理css3样式，添加前缀兼容代码
// scss-loader：处理scss样式
 module: {
     // developemt: 测试环境
     // production：生产
     mode: 'development'
     // 启用sourceMap,设置为fasle时关闭,
     // 常用开发环境：eval-cheap-module-source-map， 
     // 生产环境（有需要的话）：cheap-module-source-map
     devtool: 'eval-cheap-module-source-map'
     rules: [
       {
           // 打包图片：当文件后缀为jpg|pan|gif时，使用flie-loader插件打包
           test: /.(jpg|pan|gif)$/,
           // use: 'file-loader'
           use: {
               loader: 'url-loader', 
               options: {
                   // 打包生成的文件，为原来的文件名/格式
                   name: '[name].[ext]' // 添加哈希值：[name]_[hash].[ext]
                   // 输出文件路径 图片打包到images文件下
                   outputPath:'/images/'
                   // 设置图片大小（字节）2048 = 2K，
                   // 超过这个大小，生成图片文件，否则base64格式
                   limit:2048
               }
           }
       },
       {
           test: /.css$/
           use:[
               'style-loader',
               'css-loader',
               'postcss-loader', // 需要配置
               'scss-loader'
           ]
       },
       {
           // 处理字体文件
           test: /.(eot|svg|ttf|woff)/,
           use: 'flie-loader'
       }
     ]
 }
 // 配置postcss-loader
 // npm install atuoprefixer -D
 // package.json 中添加 
     "browserslist":[
         "> 1%" // 大于1%的浏览器
         "last 2versions" // 兼容浏览器的上两个版本
     ]
 module.export = {
     plugins: {
         require('autoPrefixer)
     }
 }
 

复制代码

插件

// npm install --save-dev html-webpack-plugin 自动生成html文件
// npm install --save-dev clear-webpack-plugin 删除打包文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ClearWebpackPlugin } = require('clrae-webpack-plugin');

plugins: [
    // 自动生成HTML文件
    new HtmlWebpackPlugin({ 
      // 引入html模板文件
      template: './src/index.html' 
    }),
    // 删除打包文件，HtmlWebpackPlugin重新生成文件
    new ClearWebpackPlugin()
],
复制代码

webpackDevserve

自动打包，热加载，请求转发,代理（只能在测试环境上使用）,模块热替换

 // webpackDevServe：不需要重新打包
     // 1. 自动打包
         // 配置命令：webpack内置命令启动项目
        "script":{
            "watch": "webpack --watck"
        }
        module.exports = {
          plugins:{
            new HtmlWebpackPlugin({ 
              // 引入html模板文件
              template: './src/index.html' ,
              cache: false
            }),
          }
        };
     //  2. 自动打包，热加载，请求转发
         // 配置启动命令
         "script":{
             // 自动打包
            "start": "webpack serve"
        }
         module.exports = {
          debServe: {
             // 自动打包
             // contentBase: './dist',
             // 热加载
             "static"："./dist",
             // 模块热替换，启动HMR：css不需要配置，，js需要配置
             "hot": true
              // 请求转发
              proxy: {
                  // 请求路径开头为api/xxx时,在前面加上域名
                  '/api/xxx': {
                      target："http://xxx.xxx",
                      // 所以以api开头的都替换成''
                      pathRewrite: {
                          '^api': ''
                      }
                      changeOrigin: true
                  }
              }
          },
          plugins:{
            new HtmlWebpackPlugin({ 
              // 引入html模板文件
              template: './src/index.html' ,
              cache: false
            }),
          }
        };
        
         // js热加载
         // 入口文件，中执行
         if (module.hot) {
            module.hot.accepy("./number.js", () => {
                // 获取dom元素
                const numberDiv = document.getElementById('number')
               // remove掉dom元素
                document.dody.removeChild(numberDiv)
                // 重新执行number方法,重新生成dom元素
                number()
           })
        }
复制代码

babel处理ES6语法

// ES6语法转换为ES5语法
// npm install --save-dev babel-loader @babel/core
// npm install @babel/preset-env --save-dev
// 兼容低版本浏览器：polyfill: npm install --save @babel/polyfill
// 在使用了ES6语法的js文件引入：import '@babel/polyfill'
module: {
    rules: {
        // 文件以js结尾的
        test: /\/js$/,
        // 排除node_module文件下的js文件,依赖
        exclude: /node_modules/,
        use: {
            loader: "babel-loader",
            // opstions: ['@babel/preset--env']
             opstions: {
                ['@babel/preset--env'],
                {
                    // 配置@babel/polyfill,只引入需要文件中需要转换的ES6语法
                    useBuiltins: 'usage'
                }
            }
        }
        
    }
}
复制代码