Webpack (2)

Table of contents

Five concepts of webpack configuration

webpack configuration file settings

---

In this section, we need to do some understanding of the basic configuration of webpack.

Five concepts of webpack configuration

1.entry (entry)

Instruct Webpack which file to start packing

2. output (output)

Instruct Webpack where to output the packaged files, how to name them, etc.

3.loader (loader)

webpack itself can only handle js, json and other resources, and other resources need to use loader for Webpack to parse

4.plugins (plug-in)

Extending the functionality of Webpack

5.mode (mode)

There are mainly two modes:

• Development mode: development
• Production mode: production

webpack configuration file settings

A new webpack configuration file needs to be created in the root directory of the project: webpack.config.js ( Webpack is based on Node.js, so it adopts the Common.js modular specification )

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

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名 在dist目录下
    filename:"static/main.js",
    //自动清空上次打包结果,即打包前将path目录整个清空
    clean:true,
  },
  // 加载器，用来处理其他资源
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

After setting the basic configuration of webpack, you can use the following simple instructions to package the Js resources involved in the entry file. However, webpack cannot handle style resources, font icons, image resources, html resources, etc. by default, so we need to compile these resources in the rules configuration in the module loader of the webpack configuration file, which will be discussed in detail in subsequent chapters.