【webpack5】(一) 基本使用及安装教学

---

一、webpack是什么？

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)

二、安装步骤

输入指令：

npm install webpack webpack-cli

三、webpack五个核心

1.Entry

入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

2.Output

输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

3.Loader

Loader 让 webpack 能 够去处理那些非 JavaScript 文件(webpack 自身只理 解JavaScript)

4.Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等

5.Mode

四、基本演示

目标：打包出一个可以将整个背景色都渲染为蓝色的js文件

首先在文件夹中创建两个文件src和build，它们分别表示入口文件夹和出口文件夹，接着在src文件夹下创建index.js作为入口文件

接着我们在src文件夹下创建样式文件
index.less，并在其中设置背景色

接着在index.js文件下引入index.less文件

现在我们来做最后一步：配置webpack配置文件。首先创建webpack.config.js文件,并在里面如下配置：

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');	//获取绝对路径方法	
module.exports = {
	//入口文件
    entry: './src/index.js',
    //出口文件
    output: {
    	//出口文件名(自定义)
        filename: 'built.js',
        //出口路径(注意：此处最好为绝对路径，因此我们用到path这个包的resolve方法获取)
        path: resolve(__dirname, 'build')
    },
    // loader的配置(注意：所有loader都必须要下载，包括下面的style-loader，css-loader,less-loader等)
    module: {
        rules: [
        // 详细loader配置
     	// 不同文件必须配置不同loader处理
            {
            	// 匹配哪些文件
                test: /\.less$/,
                // 使用哪些loader进行处理
                use: [
                // use数组中loader执行顺序：从右到左，从下到上 依次执行
         		 // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader',
                    //将less文件变成css文件
                    'less-loader'

                ]
            },
        ]
    },
    // plugins的配置
    plugins: [
        // 详细plugins的配置
    ],
    // 模式
    mode: 'development'  // 开发模式
    // mode: 'production'
};

接着我们只需要在命令行输入：

webpack

就会报成功

此时我们发现build文件夹下多了一个built.js文件，这就是我们成功打包好的文件了，我们现在需要在build文件夹下创建一个空的html文件，去检测这个打包好的文件是否生效

结果