2020年你不能不知道的webpack基本配置

本文主要是介绍2020年你不能不知道的webpack基本配置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

在很久很久以前，在我们前端还只是页面切图仔的年代，我们开发一个html页面，通常会遇到这些情况：

需要引入十几个css和js文件，而且因为他们彼此间有着依赖关系，所以引入的顺序还不能乱。
传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。
代码复用性差，可维护性差。

此时就需要一个处理这些问题的工具，webpack应运而生。

webpack可以看做是模块打包工具：它将各种静态资源（比如：javaScript 文件，图片文件，css文件等）视为模块，它能够对这些模块进行解析优化和转换等操作，最后将它们打包在一起，打包后的文件可用于在浏览器中使用。

webpack的优点：

代码转换: typeScript 编译成 javaScript、scss，less 编译成 css.
文件优化：压缩 javaScript、css、html 代码，压缩合并图片。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
扩展性强，插件机制完善。

webpack打包过程：

1.利用babel完成代码转换,并生成单个文件的依赖
2.从入口开始递归分析，并生成依赖图谱
3.将各个引用模块打包为一个立即执行函数
4.将最终的bundle文件写入bundle.js中

Webpack 的四大核心：

entry：js 入口源文件
output：生成文件
loader：进行文件处理
plugins：插件，比 loader 更强大，能使用更多 webpack 的 api

Entry

webpack 应该使用哪个模块做为入口文件，来作为构建其内部依赖图的开始。进去入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

单⼊⼝：entry 是⼀个字符串

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

多⼊⼝：entry 是⼀个对象

module.exports = {
  entry: {
    index: './src/index.js',
    manager: './src/manager.js'
  }
}

Output

告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，这些都可以在webpack的配置文件中指定。

单⼊⼝配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js’,
        path: __dirname + '/dist'
    }
};

多⼊⼝配置

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

通过[name]占位符确保⽂件名称的唯⼀

Loader

loader 让 webpack 能够去处理那些非 javaScript 文件（webpack 自身只理解 javaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader的特点

一个Loader 的职责是单一的，只需要完成一种转换
一个Loader 其实就是一个Node.js 模块，这个模块需要导出一个函数
loader 总是从右到左地被调用。

常用的loader

处理样式

css-loader: 加载.css 文件，
style-loader:使用 style 标签将 css-loader 内部样式注入到我们的 html 页面
less-loader, sass-loader: 解析css预处理器

处理 js

让你能使用最新的js代码（ES6，ES7...）
让你能使用基于js进行了拓展的语言，比如React的JSX；

处理文件

处理图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数

处理.vue文件

vue-loader 是 webpack 的加载器模块，它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块（例如 sass 或 scss 加载器）提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。

开发一个loader

需求：手写一个 loader，将 'kobe' 这篇关于2020年你不能不知道的webpack基本配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML5教程