好看的网页千篇一律，有趣的代码万里挑一。

大家好，我是云瑶糖糖，你也可以称呼我糖糖，主攻web前端，这篇简书说说webpack。

webpack 是静态模块打包器

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

food (4).png

哈哈，不是吃的包哦，不过这样也可以加深印象，
像包子一样很有料

1638775189(1).png 1638775669(1).png

webpack默认会通过 index.js 作为入口文件 作为起点开始打包

所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs规范

webpack 五个核心概念

1. entry 入口 webpack 以哪个文件为入口起点开始打包
2. output 输出 webpack 打包后的资源
3. loader 翻译官 让 webpack 能够去处理那些非 javascript 文件 (webpack自身只理解javascript文件和json文件)
4. plugins 插件 可以用于执行范围更广的任务，功能比loader更强
5. mode 模式 (development 开发模式 本地调试运行的环境；production 生产模式 上线运行的环境)

webpack配置文件
webpack.config.js
作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
基本配置：

//路径模块
const path = require("path");
//导入清除插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入生成html页面的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入独立生成css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //设置模式：production是生成模式，development是开发模式
  mode: "production",
  //入口
  entry: "./src/main.js",
  //出口
  output: {
    //打包之后的文件名
    filename: "js/app.js",
    //打包路径
    path: path.resolve(__dirname, "dist"),
  },
  //插件
  plugins: [
    //重新打包时，清除之前打包文件的插件
    new CleanWebpackPlugin(),
    //生成html文件的插件
    //默认会创建一个空的html文件，自动引入打包输出的所有资源（JS、CSS）
    //也可以指定一个html文件作为模板
    new HtmlWebpackPlugin({
      template:"./public/index.html"
    }),
    //生成独立css文件的插件
    new MiniCssExtractPlugin({
      //设置生成的css文件的名称和路径
      filename:"css/app.css"
    })
  ],
  //loader的配置
  module: {
    //规则，详细loader配置，不同文件必须配置不同loader处理
    rules: [
      // 识别图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
      /* {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            //选项
            options: {
              //文件名([原文件名]_[随机返回hash值].[原扩展名])
              name:'imgs/[name]_[hash].[ext]',
              //最低参与打包文件的大小（单位是字节）
              limit: 2048,
              //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
              //解析时会出问题：[object Module]
              //解决：关闭url-loader的es6模块化，使用commonjs解析
              esModule:false,
            }
          }
        ]
      }, */
      /* {
        test:/\.html$/,
        //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader:'html-loader'
      }, */
      // 识别样式文件
      {
        test: /\.css$/,
        // use数组中loader执行顺序：从右到左，从下到上依次执行
        // css-loader：将css文件变成commonjs模块加载js中
        // style-loader：创建style标签，将js中的样式资源插入进去
        use: ['style-loader','css-loader']
      }
      /* {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      } */
      /* {
        test: /\.css$/i,
        use: [{
          loader:MiniCssExtractPlugin.loader,
          options:{
            // 当前的css所在的文件相对于打包后的根路径dist的相对路径
            publicPath: '../'
          }
        }, 'css-loader'],
      } */
    ],
  },
};

vue-loader：

//路径模块
const path = require("path");
//导入清除插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//导入生成html页面的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入独立生成css文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入vue-loader插件
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  //设置模式：production是生成模式，development是开发模式
  mode: "production",
  //入口
  entry: "./src/main.js",
  //出口
  output: {
    //打包之后的文件名
    filename: "js/app.js",
    //打包路径
    path: path.resolve(__dirname, "dist"),
  },
  //插件
  plugins: [
    //重新打包时，清除之前打包文件的插件
    new CleanWebpackPlugin(),
    //生成html文件的插件
    //默认会创建一个空的html文件，自动引入打包输出的所有资源（JS、CSS）
    //也可以指定一个html文件作为模板
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    //生成独立css文件的插件
    new MiniCssExtractPlugin({
      //设置生成的css文件的名称和路径
      filename: "css/app.css",
    }),
    //用于识别vue的单文件组件的插件
    new VueLoaderPlugin(),
  ],
  //loader的配置
  module: {
    //规则，详细loader配置，不同文件必须配置不同loader处理
    rules: [
      // 使用vue-loader加载器，去识别.vue组件
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      // 识别字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
      // 识别图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
      /* {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            //选项
            options: {
              //文件名([原文件名]_[随机返回hash值].[原扩展名])
              name: "imgs/[name]_[hash].[ext]",
              //最低参与打包文件的大小（单位是字节）
              limit: 2048,
              //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
              //解析时会出问题：[object Module]
              //解决：关闭url-loader的es6模块化，使用commonjs解析
              esModule:false,
            },
          },
        ],
      }, */
      /* {
        test:/\.html$/,
        //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader:'html-loader'
      }, */
      // 识别样式文件
      {
        test: /\.css$/,
        // use数组中loader执行顺序：从右到左，从下到上依次执行
        // css-loader：将css文件变成commonjs模块加载js中
        // style-loader：创建style标签，将js中的样式资源插入进去
        use: ['style-loader','css-loader']
      }
      /* {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      }, */
      /* {
        test: /\.css$/i,
        use: [{
          loader:MiniCssExtractPlugin.loader,
          options:{
            // 当前的css所在的文件相对于打包后的根路径dist的相对路径
            publicPath: '../'
          }
        }, 'css-loader'],
      } */
    ],
  },
  //开发服务器相关
  //开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为：npx webpack-dev-server
  devServer: {
    //端口号
    port: 8848,
    //自动打开页面
    open: true,
  },
  //解析
  resolve: {
    //路径
    alias: {
      // __dirname是nodejs里面的全局变量，表示当前项目的路径
      "@": path.resolve(__dirname, "src"),
      "@c": path.resolve(__dirname, "src/components"),
    },
  },
};

对应的package

1. npm install webpack@4.41.6 -D
2. npm install webpack-cli@3.3.11 -D
3. npm install css-loader@3.4.2 -D
4. npm install style-loader@1.1.3 -D
5. npm install file-loader@5.0.2 -D
6. npm install url-loader@3.0.0 -D
7. npm install html-loader@0.5.5 -D
8. npm install mini-css-extract-plugin@0.9.0 -D
9. npm install html-webpack-plugin@3.2.0 -D
10. npm install clean-webpack-plugin@3.0.0 -D
11. npm install webpack-dev-server@3.10.3 -D
12. npm install vue-loader@15.9.6 -D
13. npm install vue-template-compiler@2.6.12 -D
14. npm install vue@2.6.12 -S
15. npm install element-ui@2.15.1 -S

scripts配置

"serve": "webpack",
"build": "npx webpack-dev-server"