基本配置

5个概念

概念	解释
entry,入口	指示webpack从哪个文件开始打包
output,输出	指示webpack打包完的文件输出到哪里去，如何命名等
loader,加载器	借助加载器，可以让webpack能够处理css、html等文件
plugins,插件	扩展webpack的功能
mode,模式	开发模式development、生产模式production、不处理none

基础配置

配置文件需要在项目根目录创建webpack.config.js文件

const path = require("path");
const TestPlugin = require("插件路径");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    clean: true,  // 打包时清空前一次打包内容(webpack4需要安装插件)
  },
  module: {
    rules: [

    ]
  },
  plugins: [
    new TestPlugin(),
  ],
}

配置好之后使用npx webpack即可进行打包。这是因为，这行命令会根据webpack后是否有其它语句来查找配置文件。当没有其它语句时，默认会从项目根目录找到webpack的配置文件。

开发模式说明

在这个模式下会做两件事：编译代码，代码质量检查。

编译代码，是为了能够让浏览器能够识别css，html，图片等的资源文件

代码检查，降低代码隐患

模式的命令行使用

除了在配置文件中用mode显式配置外，还可以直接在运行时用命令行来配置

yarn webpack --mode development