Webpack5基础概念

基本使用

概念：webpack就是一个资源打包工具

安装：

• 初始化package.json文件npm init(package.json文件中name值不应该使用webpack)
• 安装依赖npm i webpack webpack-cli -D
• 启动：npx webpack ./src/main.js --mode=development
  • npx 自动查找node_modules文件夹下的bin文件
  • --mode 分development开发模式和production生产模式
  • ./src/main.js 需要打包的文件路径
• 引入打包后文件dist/main.js
• 基础的只能处理js资源

核心概念

1. entry（入口）：指定文件从哪个文件开始打包
2. output（输出）：文件输出路径及名称
3. loader（加载器）：webpack本身只处理js、json等资源，其它资源需要借助loader进行处理
4. plugins（插件）：扩展webpack功能
5. mode（模式）：development开发模式和production生产模式

const path = require("path");//node.js核心模块，专门用来处理路径问题

module.exports = {
    //入口-相对路径
    entry: './src/main.js',
    //输出
    output: {
        //绝对路径
        //__dirname 代表当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),
        filename: "main.js"
    },
    //加载器：
    module: {
        rules: []
    },
    //插件
    plugins: [],
    //模式
    mode: 'development'
}

自用笔记，欢迎指错，不喜勿说