webpack 使用总结

1、意义

主要功能：现在前端有很多各种各样的工具和框架，直接给浏览器他不认识、需要转化为浏览器认识的版本和语言。
其他功能：引入其他插件或实现额外功能。

2、webpack术语

Bundle

最后的生产脚本。也就是最终浏览器可以直接运行的代码。

module

一个文件

chunk

webpack处理的依赖图

下方图片表明了他们的关系

{
   
    entry: {
   
        index: "../src/index.js",
        utils: '../src/utils.js',
    },
    output: {
   
        filename: "[name].bundle.js", // 输出 index.js 和 utils.js
    },
    module: {
   
        rules: [
            {
   
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 创建一个 link 标签
                    'css-loader', // css-loader 负责解析 CSS 代码, 处理 CSS 中的依赖
                ],
            },
        ]
    }
    plugins: [
        // 用 MiniCssExtractPlugin 抽离出 css 文件，以 link 标签的形式引入样式文件
        new MiniCssExtractPlugin({
   
            filename: 'index.bundle.css' // 输出的 css 文件名为 index.css
        }),
    ]
}

3、config 配置概念

1、Entry

入口起点（可以有多个）（entry）：指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

    // string方式： 单入口，打包形成一个trunk，输出一个buldle文件。trunk的名称默认是main.js
    entry: "./src/index.js",
    // array方式：多入口，所有入口文件最终只会形成一个trunk，输出出去只有一个bundle文件
    entry: ["./src/index.js", "./src/test.js"],
    // object：多入口，有几个入口文件就形成几个trunk，输出几个bundle文件。此时trunk的名称就是对象key值
    entry:{
   
        index:"./src/index.js",
        test:"./src/test.js",
    }

2、Output

输出（output）：指示 Webpack 打包后的资源 bundles 输出到哪里，以及如何命名。

  output: {
   
        // 输出文件目录（将来所有资源输出的公共目录，包括css和静态文件等等）
        path: path.resolve(__dirname,