从上图我们可以看出，webpack 可以将多种静态资源 js、css、sass文件等转换成一个静态文件，以此可以减少页面的请求，从而提高浏览器响应速度

1.安装开发依赖包

npm install webpack webpack-cli -D

2.添加打包配置文件

webpack.config.js(执行打包命令时会默认执行)

const path = require('path');
module.exports = {
  //development：开发模式，production：生产(上线)模式
  mode: 'development',
  //打包文件的入口
  //单个文件
  entry: './src/index.js',
  //多个文件
  // entry: {
  //     index: './src/index.js',
  //     //other: './src/other.js'
  // },
  //打包文件的出口
  output: {
      //打包后的文件
      //单个文件
      filename: 'js/bundle.js',
      //多个文件
      //filename: 'js/[name].bundle.js',
      //打包后的文件所在目录，对于webpack命令有效；
      //而对于webpack-dev-server命令无效，其打包后存储在devServer开发服务器内存根目录下('/')，所以我们无法查看
      path: path.join(__dirname, './dist')
  },
};

3.打包命令

• 开发打包命令

npx webpack --watch(监听程序是否修改，若程序修改，自动重新打包)
或者
npm run dev (先在package.json文件的scripts选项添加 "dev":"webpack" 配置)
打包成功后，html文件就可以手动导入打包后所需的目标文件；
当然我们也可以事先安装好html-webpack-plugin插件，然后在webpack.config.js配置文件中设置相关配置，就不需要我们手动导入打包后的文件了，该插件可以帮助我们把打包后的文件自动注入到配置好的html文件中，该html文件也会在导出目录中自动创建。

• 生产(上线)打包命令

npx webpack -p(或者--production)
或者
npm run build (先在package.json文件的scripts选项添加 "build":"webpack -p" 配置)

4.devServer开发服务器(webpack自动打包工具)

安装开发依赖包：
  npm install webpack-dev-server -D
打包命令：
  npx webpack-dev-server
  (1)打包后的文件默认会存放在devServer开发服务器内存的根目录下('/'),在电脑硬盘上是无法查看的，不过当我们用浏览器访问开发服务器时，可在浏览器调试窗口下的源代码选项查看
  (2)打包成功后devServer开发服务器默认地址为：http://localhost:8080，当浏览器访问该地址时，默认会加载devSer开发服务器目录下的index.html文件，当然我们还应当安装html-webpack-plugin插件设置相关配置，才能自动生成index.html
  或者
  npm run start (先在package.json文件的scripts选项添加 "start":"webpack-dev-server --open --host 127.0.0.1 --port 8888" 配置)
  相关参数
  --open：自动打开浏览器
  --host：指定主机名
  --port：指定端口号

也可以在webpack.config.js文件设置devServer相关配置

const path = require('path');
module.exports = {
  devServer: {
      open: true,
      host: '127.0.0.1',
      port: 8888
      //设置devServer开发服务器静态资源目录
      //默认为项目的根目录(与package.json同路径)
      contentBase: path.join(__dirname, './')
  }
}

5.html页面预览插件(html-webpack-plugin)

npm i html-webpack-plugin -D

webpack.config.js文件相关配置

//html webpack打包成功后预览页面插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
  //设置打包成功后预览页面的模板
  template: './src/index.html',
  //打包成功后，打包过后的文件会自动注入到模板文件中,设置最终生成的预览文件名
  filename: 'index.html',
});
module.exports = {
  plugins: [htmlPlugin]
}

6.打包css相关文件

• 打包css文件

npm i css-loader style-loader postcss-loader autoprefixer -D

webpack.config.js文件相关配置

module.exports = {
  module: {
      //配置规则
      rules: [
          //加载css样式配置
          {
              //匹配的文件类型，以.css后缀
              test: /\.css$/,
              //加载器从右往左处理
              use: ['style-loader', 'css-loader', 'postcss-loader'] //postcss-loader用于自动添加前缀
          }
      ]
  }
}

postcss.config.js文件相关配置

//自动添加css前缀插件，配合postcss-loader使用
const autoprefixer = require('autoprefixer');
module.exports = {
  plugins: [
      autoprefixer
  ]
}

• 打包less文件

npm i css-loader style-loader less-loader less -D

webpack.config.js文件相关配置

module.exports = {
  module: {
      //配置规则
      rules: [
          //加载less样式配置
          {
              test: /\.less$/,
              use: ['style-loader', 'css-loader', 'less-loader'] //less-loader依赖less核心包
          }
      ]
  }
}

• 打包scss文件

scss是sass基于css3规范的一种。

npm i css-loader style-loader sass-loader node-sass -D

webpack.config.js文件相关配置

module.exports = {
  module: {
      //配置规则
      rules: [
          //加载scss样式配置
          {
              test: /\.scss$/,
              use: ['style-loader', 'css-loader', 'sass-loader'] //sass-loader依赖node-sass核心包
          }
      ]
  }
}

7.打包图片/音频文件

npm i url-loader file-loader -D

webpack.config.js文件相关配置

module.exports = {
  module: {
      //配置规则
      rules: [
          //加载图片/字体配置
          {
              test: /\.(jpg|png|gif|bmp|eot|svg|woff|woff2)$/,
              //url-loader依赖file-loader核心包，图片小于16940字节，会转化成base64格式，超过则不会转化,name参数为图片打包路径
              //use: 'url-loader?limit=16940&name=images/[name].[ext]&esModule=false'
              // 或者
              loader: 'url-loader',
              options: {
                  limit: 16940, //文件大小小于这个值，转为base64格式，超过保持原有格式
                  name: 'images/[name].[ext]', //文件大小超过限制时的存储路径，以及文件命名格式
                  esModule: false //src路径默认会解析成[object Module]，因此设置不解析成Module
              }
          },
          //加载音频文件配置
          {
              test: /\.(mp3)(\?.*)?$/,
              use: 'url-loader?name=audio/[name].[ext]&esModule=false'
          }
      ]
  }
}

8.打包js文件(高级语法)

安装babel转换器相关包

npm i babel-loader @babel/core @babel/runtime -D

安装babel语法插件相关包

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

webpack.config.js文件相关配置

module.exports = {
  module: {
      //配置规则
      rules: [
          //加载高级js语法文件配置
          {
              test: /\.js$/,
              use: 'babel-loader',
              exclude: [/node_modules/] //排除node_modules文件夹
          }
      ]
  }
}

babel.config.js文件相关配置

const presets = [
  ["@babel/preset-env",
      { //配置兼容的浏览器版本
          targets: {
              edge: "17",
              firefox: "60",
              chrome: "67",
              safari: "11.1"
          },
          //配合@bable/polyfill(可以模拟完整的ES6+环境)
          //假如参数值为"usage"，babel将检查你的所有代码，查找目标环境中缺失的功能，然后只把必须的polyfill包含进来
          //假如参数不是"usage"，将会把完整的polyfill包含进来
          useBuiltIns: "usage"
      }
  ]
];
module.exports = {
  //presets,
  presets: ['@babel/preset-env'], //不配置targets，将转换所有ES6+代码为ES5兼容，一般不这样做
  plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

9.打包vue文件

npm i vue-loader vue-template-compiler -D

webpack.config.js文件相关配置

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  plugins:[new VueLoaderPlugin()],
  module: {
      //配置规则
      rules: [
            //加载vue单文件组件配置
          {
              test: /\.vue$/,
              loader: 'vue-loader'
          }
      ]
  }
}

10.清理dist目录插件

每次打包构建项目时，会先清理dist目录，再打包构建项目

npm i clean-webpack-plugin -D

webpack.config.js文件相关配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {

  plugins:[new CleanWebpackPlugin()],

}