这张图是webpack官网的

什么是webpack？

一个现代JavaScript的静态模块打包器，webpack运行时会把应用程序所需要的的多个模块打包成一个或多个bundle文件

如图所示webpack把关系复杂形式不同的静态文件，转换成了浏览器可以识别的js、css等等。webpack从4.0版本开始支持0配置启动，开箱即用，webpack会默认src/index为入口文件，会在dist/main.js输出，并且生产环境开启压缩和优化

webpack安装

全局安装 npm install webpack webpack-cli -g
局部安装 npm install webpack webpack-cli -d(开发依赖)

npm install webpack webpack-cli -s(生产依赖)
查看版本号 npx webpack-v
初始化项目 npm init

webpack核心概念

//webpack基于node.js的构建工具
const path = require("path");
module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'[name].js'
    },
    mode:'development',
    //loader
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader' 'css-loader','sass-loader']
            }
        ]
    },
    //plugin
    plugins: [
        new htmlwebpackplugin({
            template: './src/index.html',
            filename: "index.html",
            chunks: ['index']
        }),
        new minicss({
            filename: "css/[name].css"
        }),
        new htmlwebpackplugin({
            template: './src/list.html',
            filename: "list.html",
            chunks: ['list']
        }),
        new CleanWebpackPlugin()
    ]
}

entry

指定入口文件位置，字符串最后会被解析成对象。

    //多入口文件配置
    entry:{
        index: './src/index.js',
        list: './src/list.js'
    }

output

 指定出口文件位置以及文件名称
 path:输出bundle文件的位置
 filename：输出文件的名称

mode

不设置mode默认选择production

打包模式：
        none退出任何默认优化选项
        development(开发模式)注重体验，代码不会被压缩，输出信息多
        production(生产模式)会启动TerserPlugin插件进行代码压缩

我们来观察一下两个不同模式下的控制台输出和bundle文件的区别

模式	控制台输出	bundle文件
development

production

更多详情请看官网

loader

用于对模块的源代码进行转换，将es6转换成es5，less、sass转换成css等等使用loader有两种方式，一种是配置方式，另一种是内联方式。测试用例中用到的是配置方式（内联方式还没有实操过）

注⚠️使用loader时请先npm install xxx-loader

test检测到.css的文件就使用use里的loader进行转换
use可以使用一个loader也可以使用多个loader
use:"css-loader"
使用多个loader需要用数组，loader会依次从右向左取｜值执行

可额外配置options选项，具体内容需要依照xxx-loader的要求

plugin

插件的目的是实现loader无法实现的其他事情，插件是一个具有apply方法的JS对象。apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问到compiler对象举一个官网上的例子

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建正在启动！');
    });
  }
}
module.exports = ConsoleLogOnBuildWebpackPlugin;

在测试用例中plugin的使用比较简单，new一个plugin对象并传入所需的参数或选项。

chunk｜chunks

在打包过程中会出现chunks，是所有chunk的集合

如上图所示，根据入口文件来区分chunks

//其中index和list属性就是chunks，而index.js和它所引用的其他文件则都是chunk
entry:{ 
    index: './src/index.js',
    list: './src/list.js'
}

结语

这篇文章很短，只是简单粗暴的记了webpack的笔记，初识webpack感觉有点复杂（听up主说vite更快更简单），接下来一周会记录一下，自定义的loader和plugin。争取在年前把vite写完～

Webpack基础笔记