【webpack】从零开始配置webpack系列(基础篇)_webpack

指示 Webpack 从哪个文件开始打包

• output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

• loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

• plugins（插件）

扩展 Webpack 的功能

• mode（模式）

主要由两种模式：

+ 开发模式：development
+ 生产模式：production

webpack配置文件

webpack 给我们提供了通过配置文件webpack.config.js，来自定义配置参数的能力。

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

简单修改配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // \_\_dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

然后运行指令npx webpack

2.一些基础操作

修改输出资源的名称和路径

在下面的配置中，我们将打包好的js文件放在 dist/js 目录中.

对于下面的图片的存放路径，后续会进行介绍.

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "dist/js/main.js", // 将 js 文件输出到 dist/js 目录中
  },
  module: {
    rules: [
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

自动清空上次打包资源

当我们进行打包后，会生成一个dist目录，但是当我们再一次进行打包时，上一次生成的dist目录并不会清空，所以我们需要手动删除上一次的dist目录。

clean: true 自动将上次打包目录资源清空

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "dist/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

开发服务器&自动化

起初我们想要查看打包好的文件，都是通过点击打开dist目录下的index.html，通过插件open with live server 在浏览器中查看。

插件webpack-dev-server可以实现自动化，我们可以看到每次打包好的页面。

执行命令下载：

npm i webpack-dev-server -D

配置 webpack.config.js

 // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

整体文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

执行命令：

npx webpack-dev-server --open
或
npx webpack serve

3.处理 html 资源

首先安装插件：

npm install html-webpack-plugin -D

并且调整 webpack.config.js 文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //...
    plugins: [
        // 实例化 html-webpack-plugin 插件
        new HtmlWebpackPlugin()
    ]
}

打包后，我们发现这个 dist/index.html 似乎与先前的 index.html 并没有关系， HtmlWebpackPlugin 会默认生成它自己的 index.html 文件，并且所有的 bundle（bundle.js） 会自动添加到 html 中。

而我们想要基于原来的 index.html 来生成打包后的 dist/index.html

可以对 html-webpack-plugin 插件进行配置来实现

plugins: [
    // 实例化 html-webpack-plugin 插件
    new HtmlWebpackPlugin({
        template: './index.html', // 以src目录下的 index.html 作为模板创建打包文件
        filename: 'app.html', // 打包生成的文件名称。默认为index.html
        
        // 设置所有资源文件注入模板的位置。
        //可以设置的值 true|'head'|'body'|false，默认值为 true
        inject: 'body'
    })
]

4.处理样式资源

webpack 本身是不能识别样式资源的，所以我们需要借助 loader 来帮助 webpack 解析样式资源。

处理 Css 资源

下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

功能介绍

• css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
• style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style