webpack 原理及使用

【点赞收藏加关注，前端技术不迷路~】

一、webpack基础

1.核心概念

1）entry：定义入口，webpack构建的第一步

module.exports ={entry:'./src/xxx.js'
}

2）output：出口（输出）

3）loader：模块加载器，用户将模块的原内容按照需求加载成新内容

        比如文本加载器raw-loader（安装：npm add raw-loader -d;）

在webpack中，引用 .js文件、.json文件时不需要定义加载器，是webpack内置功能。因为webpack就是为了cjs结构来打包的。因为支持cjs，所以只支持js，json。除这两种文件，webpack不知道如何加载，需要指定加载器：webpack.config.js

module: {rules: [{ test: /\.txt$/, use:'raw-loader' }]// 指定.txt文件使用文本加载器raw-loader来打包
}

4）plugin：插件

        扩展插件，在webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果

        比如html出口打包插件html-webpack-plugin（安装：npm add html-webpack-plugin -d;）

        使用插件需要引入：const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" });
],

        将src/index.html作为dist/index.html输出文件的模板，并将打包的main.js以延迟加载defer的方式引入html；

5）mode：打包环境，通过选择development、production或none之中的一种，来设置mode参数

        mode可以启用webpack内置的，在相应环境下的优化，默认值是production。

6）DevServer：开发服务器

        提供了一个基本的web server，并具有live reloading(实时重新加载)功能；

                1.静态服务比如：图片