Webpack使用—基础介绍

Webpack介绍

前言

当前的浏览器要加载一个网页，除了JS之外，还会涉及到很多的依赖包，其中有些是没办法浏览器直接解析的（scss、typescript等），这个时候就需要一些工具来完成对这些模块的解析工作。此外，随着前端模块化的趋势，将前端的各种文件模块打包也变得越来越重要，而webpack就是支持通过分析项目结构，将所有的依赖模块打包，转化为合适的格式供浏览器使用。

何谓webpack

webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。什么是静态模块呢？其实是指静态资源所组成的模块，而静态资源包含我们前端常见到的字体、css、icon、图片等，这些都能够被webpack通过依赖关系进行整理和打包，最后形成一个或多个bundle文件供浏览器加载。

优点

基于webpack的一些功能，具有以下特点：

1. 通过加载各种loader，支持各种语言和预处理器的模块转化（webpack默认只支持JS的模块打包）。
2. 支持各种依赖关系。如：import/require()/define/require/@import等。
3. 提供了可定制、丰富的API。
4. 社区生态丰富，活跃度高，官方更新迭代速度快，发展稳定。

Webpack核心配置说明

一、入口（entry）

entry作为webpack构建依赖图的入口点，通过进入入口点之后，查找出入口点所依赖的模块和库，然后再层层递归，直到找到所有的模块为止。在webpack的配置中，入口默认值为./src/index.js，我们可以在配置文件webpack.config.js中变更默认值。
entry的值可以是字符串、数组、对象，不同的值运用场景不同，具体如下：

//字符串，适用于单页引用
module.exports = {
   
  entry: './path/to/my/entry/file.js',
};
//数组，适用于需要多个入口的场景，如多页应用
module.exports = {
   
  entry: ['./src/file_1.js', './src/file_2.js']
};
//对象的方式是最可扩展的方式，但是也最为繁琐，对象有一些特殊的属性，详参官网文档
module.exports = {
   
  entry: {
   
    app: './src/app.js',
    adminApp: './src/adminApp.js',
  },
};

二、输出（output）

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。注意，即使可以存在多个 entry 起点，但只能指定一个 output 配置。

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可以指定固定的路径，如果是多个入口，output支持占位符的方式来说明输出文件名：

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