webpack-前端资源加载/打包工具（1）

---

前言

webpack是一个功能非常强大的前端资源加载/打包工具，它可以根据模块的依赖关系进行静态分析，然后将这些模块按一定规则生成静态资源（以下内容均在webpack5下调通）
官方网址

一、webpack安装

1.初始化npm

npm init -y

2.安装

npm install webpack webpack-cli --save-dev

二、编写运行

安装完后我们文件夹下目录为：

我们回忆之前学react时，其项目目录下会有一个src文件夹用来存放我们的代码文件，所以在当前目录下，我们新建一个src文件作为我们webpack的入口文件夹。src文件下我们新建一个index.js文件，我们输入随便一句js语句，然后运行npx webpack语句，就会发现项目自动生成了一个dist文件，没错，这个dist文件夹就是我们webpack的出口文件。
在里面你会发现一个main.js文件，即为你打包好后的程序，下面给出示例：
src下index.js文件(外部引入了demo文件：

import demo2 from './demo'
console.log(demo2)
console.log("123")

src下demo.js文件：

var demo1=function(){
    console.log("demo1")
}
demo1()
var demo2="demo2"
export default demo2

dist文件夹下main.js会出现：

(()=>{"use strict";console.log("demo1"),console.log("demo2"),console.log("123")})();

初看感觉不太像我们想要打包的文件内容，但要怎么验证一下呢？
本人直接在当前目录下建个html文件，然后引入运行打开控制台看输出，最后结果（也可以node试试）：

我们发现并没有报错，而且将我们要打印的数据全部打印出来了，说明我们的打包并没有问题。

三、自定义webpack

因为需求不同，我们往往要定义的子的webpack打包规则。我们通过创建webpack.config.js文件进行自定义webpack。

在该文件下，我们使用model.export进行导出操作。其内部我们定义一个入口entry，一个出口output规定我们入口和出口文件的路径，因为出口文件一般要求比较严格，所以我们使用绝对路径形式，使用path.resolve对路径进行拼接，最终得到出口的绝对路径。
具体代码如下：

const path=require("path")
module.exports={
    entry:"./src/index.js",
    output:{
        filename:"main.js",
        path:path.resolve(__dirname,"dist")
    }
}

通过上述代码，我们不难发现，自定义的webpack可以更改很多地方。

1.管理输入和输出文件（两个插件）

我们可以自定义修改entry和output文件，也可以定义多个入口文件。定义多个入口文件形式如下代码（输入文件多个可以通过定义对象形式存储，输出文件可以通过使用方括号形式输出文件）：

const path=require("path")
module.exports={
    entry:{
        index:"./src/index.js",
        demo:"./src/demo.js"
    },
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    }
}

结果，不难发现dist文件夹下生成了对应名字的文件，这里的输出文件名字是根据你的输入的键名进行输出的（传入的对象的键名）：

注意：文件夹的名字也可以更改，不一定非要叫做“dist”
但是不难发现一点，我们要求输出的只有两个文件，但却仍保留着我们上一次运行的文件，说明，每次运行的结果不会清空后重新加载，而是在原有基础上再添加，这样会造成很多冗余文件。

1.html文件初始化
每次经过webpack处理后的文件我们都要手动更新一下html里的文件，所以我们想要达成一个效果，我只要从出口获得文件，便可以直接同步到html文件里，这里就涉及到一个插件html-webpack-plugin
首先是插件的下载：

npm i html-webpack-plugin --save-dev

这时候我们就不需要自己手动创建html文件，所以删除原目录中的html文件。
下载完之后使用require引入插件，在导出的时候以类似构造函数的形式写入，具体代码如下：

const path=require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:{
        index:"./src/index.js",
        demo:"./src/demo.js"
    },
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}

这时候我们发现dist出口文件夹自动生成了html文件，具体内容如下：

我们发现他自己引入了两个处理后的js文件，此处便解决了html文件初始化的问题。

此处简单总结html-webpack-plugin的作用
1> 自动生成html文件
2> 自动引入生成的js文件

2.清除多余文件
上面两个板块都没有解决多余文件问题，这里我们引入clean-webpack-plugin，具体·用法和html-webpack-plugin差不多，但是引入的是该插件中的CleanWebpackPlugin这个属性，具体代码如下：

const path=require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin').CleanWebpackPlugin

module.exports={
    entry:{
        index:"./src/index.js",
        demo:"./src/demo.js"
    },
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ]
}

终端输入npx webpack最后发现dist文件夹下多余文件都被清理掉了。如下目录图片：

2.管理资源

当我们想将我们的非js文件一起使用webpack打包的时候我们上述操作就会报错。如下：
我们在index.js文件下创建div标签，再创建一个css文件，写入div标签的样式，然后执行命令后发现：

所以这里我们需要对css文件进行解析，所以我们还要引入两个插件css-loader，style-loader。
安装语句：

 npm i style-loader css-loader --save-dev

在导出时写入module，module里面定义一个rules，具体写法如下（注意："style-loader"一定要在"css-loader"前面，嗯。。官方文档是这么规定的）

const path=require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin').CleanWebpackPlugin

module.exports={
    entry:{
        index:"./src/index.js",
        demo:"./src/demo.js"
    },
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

此时打开你的html文件，就会显示如下;

虽然你的html本身根本没有div，但在控制台里，标签及其样式确实被渲染到了界面

对图片的打包
在刚才的css文件添加图片背景，编译，如下结果：

官网提供了一个专门操作图片的插件，首先是安装：

npm i file-loader --save-dev

代码如下：

const path=require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin').CleanWebpackPlugin

module.exports={
    entry:{
        index:"./src/index.js",
        demo:"./src/demo.js"
    },
    output:{
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use : ['file-loader']
            }
        ]
        ]
    }
}

这里会发现dist文件夹下多了一个图片文件

前端界面正常显示，控制台元素查看，我们发现html样式中引入的正式dist文件夹下的图片文件，如下