一、webpack概念

本质上，webpack是一个现代化JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图（dependency graph），此依赖图会映射项目所需要的每个模块，并生成一个或多个bundle.

二、webpack初体验

举个小栗子： index.js：webpack入口文件

1、运行指令：

开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
    webpack会以 ./src/index.js 为入口文件开始打包， 打包后输出到 ./build/built.js
    整体打包环境是开发环境
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
    webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built,js
    整体打包环境是生产环境

2、结论：

webpack能处理js/json资源，不能处理css/img等其他资源
生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
生产环境比开发环境多一个压缩js代码

Tip:使用webpack时需下载webpack到本地

npm i webpack webpack-cli -D

三、打包html资源

新建一个webpack.config.js webpack的配置文件
作用：指示webpack 干哪些事情（当运行 webpack指令时，为加载里面的配置）
所有构建工具都是基于Node.js平台运行~模块化默认采用commonjs
打包html资源需要用到html-webpack-plugin插件

npm i html-webpack-plugin -D
或者使用官方文档提供方式
npm install --save-dev html-webpack-plugin

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。 webpack.config.js配置如下：

const { resolve } = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      // loader的配置
    ],
  },
  optimization: {
    emitOnErrors: false,
  },
  plugins: [
    // plugins的配置
    // 功能：默认创建一个空的html，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制：‘./src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: "./src/index.html",
    }),
  ],

  mode: "development",
};

运行webpack打包后会生成包含以下内容的文件：

四、打包样式资源

打包css资源需要下载style-loader css-loader
打包less资源需要下载style-loader css-loader less less-loader
loader：下载 -->使用（配置loader）
plugins：下载 -->引入 -->使用

Tip:不同文件必须配置不同loader处理

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

package.json文件如下

webpack.config.js代码如下：


// resolve用来拼接绝对路径的方法
// const { resolve } = require("path");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // webpack配置
  // 入口起点
  entry: "./src/index.js",
  // 输出
  output: {
    // 输出文件名
    filename: "[name].js",
    clean: true,
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径

    path: path.resolve(__dirname, ".", "dist"),
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          "style-loader",
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          "css-loader",
        ],
      },
      {
        test: /\.less$/,
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          "style-loader",
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          "css-loader",
          // 将less文件编译成css文件
          // 需要下载less和less-loader
          "less-loader",
        ],
      },
    ],
  },
  optimization: {
    emitOnErrors: false,
  },
  // plugins的配置
  plugins: [
    //详细plugin的配置
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
  ],
  // 模式
  // mode: "development", //开发模式
  // mode:'production'
};

初识webpack一