实习打怪之路：webpack概念【入口、输出、装载机、插件、模块】（引自官网）

目录

官网：Concepts | webpack

概念

入口

输出

装载机

插件

模式

浏览器兼容性

 目录展示

总代码

---

官网：Concepts | webpack

概念

从本质上讲，webpack是现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理你的应用程序时，它会在内部从一个或多个入口点构建一个依赖关系图，然后将项目所需的每个模块组合成一个或多个bundles（捆绑） ，这些 bundles 是提供内容的静态资产。

node 环境
    npm init -y 初始化项目
    生成了pageage.json文件夹 
    在项目文件夹里建 src文件 添加入口文件 index.js


webpack核心模块

    entry： 入口
    output： 出口 输出
    module： 配置loader  loader处理非js的文件打包
    plugins：插件  
    mode：模式    development 开发模式   production  生产模式


webpack 安装

    全局安装
    cnpm i -g webpack webpack-cli
    局部暗转
    cnpm install --save-dev webpack webpack-cli
    cnpm i -D webpack webpack-cli


webpack ./src/index.js -o ./dist/main.js  --mode=development   
未设置webpack.config.js文件中入口和出口时，在命令行可以执行用来打包




loader安装
    安装 css-loader 
        cnpm i -D css-loader style-loader
    安装 less-loader
        cnpm i -D less-loader less
    安装 babel-loader
        cnpm install babel-loader @babel/core @babel/preset-env -D



webpack-dev-server  开发服务器

    安装 cnpm i -D webpack-dev-server  

插件  html-webpack-plugin
    安装  cnpm  i -D html-webpack-plugin

从 4.0.0 版本开始，webpack 不需要配置文件来打包你的项目。尽管如此，它的可配置性令人难以置信，可以更好地满足您的需求。

要开始，您只需要了解它的核心概念：

• 入口
• 输出
• 装载机
• 插件
• 模式
• 浏览器兼容性

本文档旨在对这些概念进行高级概述，同时提供指向特定概念的详细用例的链接。

为了更好地理解模块捆绑器背后的想法以及它们如何在幕后工作，请查阅以下资源：

• 手动绑定应用程序
• 实时编码一个简单的模块捆绑器
• 一个简单的Module Bundler详解

入口

入口点指示webpack应该使用哪个模块来开始构建其内部依赖图。Webpack 将找出入口点（直接和间接）依赖的其他模块和库。

默认情况下，它的值为，但您可以通过在 webpack 配置中./src/index.js设置属性来指定不同（或多个）入口点。例如：entry

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

输出

output属性告诉 webpack在哪里发出它创建的包以及如何命名这些文件。它默认./dist/main.js用于主输出文件和./dist任何其他生成文件的文件夹。

output您可以通过在配置中指定一个字段来配置该过程的这一部分：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

在上面的示例中，我们使用output.filename和output.path属性来告诉 webpack 我们的包的名称以及我们希望将它发送到哪里。如果您想知道在顶部导入的路径模块，它是用于操作文件路径的核心Node.js 模块。

装载机

开箱即用，webpack 只理解 JavaScript 和 JSON 文件。加载器允许webpack处理其他类型的文件并将它们转换为可以被您的应用程序使用并添加到依赖关系图中的有效模块。

 警告

webpack 的一项特殊功能是能够处理import任何类型的模块，例如.css文件，其他捆绑程序或任务运行程序可能不支持这些模块。我们认为该语言的这种扩展是有必要的，因为它允许开发人员构建更准确的依赖关系图。

在高层次上，加载器在你的 webpack 配置中有两个属性：

1. 该test属性标识应该转换哪个文件或哪些文件。
2. 该use属性指示应使用哪个加载器进行转换。

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

rules上面的配置为具有两个必需属性的单个模块定义了一个属性：test和use. 这告诉 webpack 的编译器以下内容：

require()“嘿，webpack 编译器，当您在/import语句中遇到解析为 '.txt' 文件的路径时，请在将其添加到包之前使用它进行转换。”raw-loader

警告

重要的是要记住，在你的 webpack 配置中定义规则时，你是在module.rules和 not下定义它们rules。为了您的利益，如果操作不正确，webpack 会警告您。

警告

请记住，在使用正则表达式匹配文件时，您不能引用它。ie/\.txt$/与'/\.txt$/'or不同"/\.txt$/"。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配具有绝对路径 '.txt' 的单个文件；这可能不是您的意图。

在加载程序部分中包含加载程序时，您可以检查进一步的自定义。

插件

虽然加载器用于转换某些类型的模块，但可以利用插件来执行更广泛的任务，如包优化、资产管理和环境变量注入。

小费

查看插件接口以及如何使用它来扩展 webpack 的功能。

为了使用插件，您需要将require()其添加到plugins数组中。大多数插件都可以通过选项进行定制。由于您可以在配置中出于不同目的多次使用插件，因此您需要通过使用new操作符调用它来创建它的实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

在上面的示例中，html-webpack-plugin为您的应用程序生成了一个 HTML 文件，并自动将您生成的所有捆绑包注入到该文件中。

在 webpack 配置中使用插件很简单。但是，有许多用例值得进一步探索。在此处了解有关它们的更多信息。

模式

通过将mode参数设置为或development，您可以启用与每个环境对应的 webpack 的内置优化。默认值为。productionnoneproduction

module.exports = {
  mode: 'production',
};

浏览器兼容性

Webpack 支持所有符合 ES5 的浏览器（不支持 IE8 及以下版本）。WebpackPromise需要import()和require.ensure(). 如果你想支持旧版浏览器，你需要在使用这些表达式之前加载一个 polyfill 。
 

 目录展示

总代码

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js', //配置入口文件
    output: {
        //打包后的文件名
        filename: 'main.js',
        // 打包后的路径，必须是绝对路径，不设置时默认是 dist/main.js
        path: path.resolve(__dirname, './dist')
    },
    // 模式    开发模式   生产模式
    mode: 'development',
    // mode: 'production',
    module: {
        rules: [{
                test: /\.css$/,
                // use 里面有顺序，从后往前执行，先模块化再引入
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        esModule: false,
                        url: true
                    }
                }]
            }, {
                test: /\.less$/,
                // use 里面有顺序，从后往前执行，先模块化再引入
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },

            {
                test: /\.png|.jpeg$/i,
                // use 里面有顺序，从后往前执行，先模块化再引入
                use: {
                    loader:'url-loader',
                    options:{
                        esModule:false,
                    }
                }
            }
        ]
    },
    devServer: {
        open: true, //自动打开浏览器
        port: 3000, //端口的配置
        hot: true, //热加载
        compress: true,
        // static:'./src'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        })
    ]






}