webpack 学习笔记1

webpack：静态模块打包器，将所有的资源文件做模块处理

开始步骤

新建文件——进入文件
npm init -y 初始化 （-y是默认都选择yes）
安装webpck和webpack-cli :npm install webpack webpack-cli --save-dev
./node_modules/.bin/webpack -v :也可以查看版本号
./node_modules/.bin/webpack : 运行webpack
通过npm script （package.json中的scripts）运行webpack
这样就可以用npm run build执行webpack命令

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.0"
  }
}

原理：模块局部安装会在node_modules/.bin目录创建软链接

默认配置文件：webpack.config.js
指定配置文件：webpack --config 配置文件

'use strict'
const path=require('path')

module.exports = {
    entry: '',
    output: {},
    mode: '',
    module:{},
    plugins:[]
}

五个核心概念

entry，output，loader，plugins，mode

entry:以哪个文件为入口起点开始打包，分析构建内部依赖图
单文件入口 entry是一个字符串
多文件入口 entry是一个对象

output: 编译后的文件输出到磁盘
单入口的entry和output

 entry: './src/index.js',
 output: {
        path:path.join(__dirname,'dist'),
        filename:'main.js'
  },

多文件入口的entry和output

entry: {
    index:'./src/index.js',
    search:'./src/search.js'
 },
 output: {
     path:path.join(__dirname,'dist'),
     filename:'[name].js'
 },

loader:由于webpack只支持js和json两种文件格式，所以要通过loaders去支持其它文件类型并且把他们转化成其它有效模块，以至于可以添加到依赖图中。（本身是个函数，接收源文件作为参数，返回转换结果）
常用loader

常用loader.png

 module:{
        rules:[
            {test:/\.txt$/,use:'raw-loader'}
        ]
    }
//test:指定匹配文件规则，use：指定使用loader名称

plugins:插件，bundle文件的优化，资源管理和环境变量的注入，作用于整个构建过程

plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'})
    ]

常用plugin

常用plugin.png

mode：指定当前构建环境——'development'/'production'/'none',默认值是‘production’，设置mode可以使用webpack内置函数

mode的内置函数功能.png