Webpack基本功能理解以及使用

对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那咱们保留咱们的好奇心，来聊一聊它，首先咱们要搞清楚webpack究竟是用来解决什么问题的，而后咱们来看看它究竟是怎么作的，最后来看看它的一些基本用法，下面就来侃一侃。

什么是webpack以及webpack的做用 （解决什么问题）

现在web前端的业务功能愈来愈复杂，实现方式也愈来愈丰富，在web页面开发过程当中咱们一般会引用不少第三方模块以及一些拓展语言（stylus，Scss， JSX...）来简化开发难度，而这些第三方模块和一些拓展语言浏览器不能直接识别，因此要经过通过打包过程生成可让浏览器识别的格式。

就像一幢居民楼，要建起这样一座居民楼，最基本的材料是砖、瓦、钢筋、混凝土。而要组合这些材料造成一幢建筑，确定是有必定的方法流程以及工具的，好比第一步先搭建地基，后面用塔吊不断的在地基上叠加完善就造成了一幢建筑。在这个过程当中，用到的方法流程以及工具起到的做用就相似于webpack。

进入正题，webpack其实就是一个JavaScript模块集成工具，同时具备压缩文件以及优化文件结构的做用。通过webpack打包生成的bundle包，可被浏览器识别解析。

在这个过程当中，会用到一些loaders解析工具用来预处理一些模块以及拓展语言（例如：stylus、Scss...）,这些工具的配置使用都是在webpack中完成的。其中经常使用的loaders工具备：style-loader、 css-loader、 stylus-loader。

webpack实现原理 （怎么作的）

原理的理解能够参照上图。
webpack的最核心的原理： 一、一切皆模块 二、按需加载。

• 一切皆模块 webpack会将源程序按照程序结构分割成一个个独立的小模块，当须要这些小模块时，进行组合重构，避免冗余，达到重复利用。
• 按需加载 传统的打包工具是将全部模块编译生成一个庞大的bundle.js文件，这样造成的打包文件体积过于庞大，而webpack经过异步加载能够实现按需加载，减少了打包后的体积。

webpack的使用方法 （怎么用它）

在使用webpack以前首先要理解四个基本概念：

1. 入口(entry)

webpack要实现打包，首先咱们得指定它的入口，指定入口后，webpack才会找出那些模块和库是入口起点（直接和间接）的依赖。
接下来咱们来看一个最简单的entry的配置例子。

webpack.base.config.js

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

2. 出口(output)

出口即配置打包后的输出文件路径，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你能够经过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.base.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出路径
    filename: 'output.bundle.js'  // 输出文件名
  }
};

3. loader

loader可以将非JavaScript文件转化为webpack识别的JavaScript文件，好比讲图片转化为JavaScript可调用的格式，或者将一些扩展语言文件转化为浏览器可识别的文件格式。
本质上，webpack loader 将全部类型的文件，转换为应用程序的依赖图（和最终的 bundle）能够直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪一个 loader。

webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

4. 插件(plugins)

loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。多数插件能够经过选项(option)自定义。你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new 操做符来建立它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 经过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

其余一些详细用法能够参考webpack官方文档。

参考： webpack中文文档

本文基于本身学习网络中的webpack整理的一份基本概念文档，是本身对于webpack使用的理解总结，若有问题，烦请评论指正，共同窗习，共同进步。😁😁😁😁