webpack基本使用（一） webpack整体了解

webpack基本使用（一） webpack整体了解

1.webpack简介

webpack官网中对其定义为 一个静态模块打包器(module bundler) 。从中可以看出：

1. webpack最基本的作用是打包功能。
2. webpack打包生成的文件是静态资源。

2.打包功能介绍

打包，顾名思义可以理解为将多个输入文件通过某些规则合并后输出为一个或多个打包后的文件。 事实上webpack的核心作用也正是如此。但在实际使用时会衍生出很对较为复杂的用法和扩展。到此为止我们会发现如下所示的新问题：

1. 为什么要对开发好的项目进行打包。

2. webpack是如何知道哪些文件需要被打包的

3. webpack根据什么规则进行打包。

4. 如何指定打包生成的文件。

为什么要对开发好的项目进行打包。

• 当前大前端环境下，js项目的开发必然要进行工程化模块化，同时第三方库的大量引用，导致文件数量越来越多，碎片化现象严重，导致浏览器引用这些文件所需要的的访问次数增加，降低运行速度。

• 随着 ES/6/7/8等标准的相继推出，出现了大量浏览器无法识别的语法，需要经过转换才能运行。

• 随着CSS样式的复杂化，出现了css预编译语言（ sass ，less等），可以让开发人员以近似于编程的形式开发css文件。但浏览器同样无法识别这些语言。

• 等等

  而webpack就是上述问题的一站式解决方案。

webpack是如何知道哪些文件需要被打包的

​ webpack的配置文件中提供entry（入口）属性，用于配置打包的起始文件之后webpack会找到该文件的所 有依赖项目（其他模块，第三方库等），之后根据这些依赖再找到他们的依赖，最终找到全部依赖关系。这些 文件会被作为chunk（代码块），作为之后打包处理的输入内容。

​ webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

webpack根据什么规则进行打包

想要进行打包，首先要能读取并解析输入的文件，而在前端开发中，存在各种类型的文件，处上面提到过的sass, less文件外，还有png，jpg等图片文件等等。而原始的webpack只能解析JavaScript以及json文件。此时就需要配置文件中的另一个属性 loader 登场 。loader的基础配置如下：

​ webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

其中test属性为正则表达式，use中为使用的loader（使用的loader需要npm install下载），通俗的说就是，凡是被test中正则匹配成功的文件，就用use中的loader加载。

以上解决了导入文件的问题，但是如果我希望对导入的文件进行进一步的处理怎么办，比如 单独分离css样式文件或使用自定义的index.html模板。此时需要用到 **plugins（插件）**属性，基础用法如下：

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

webpack会通过执行用户配置的插件来对打包过程进行处理，事实上数量众多，功能丰富的plugins 是webpack能够流行的重要原因，也是最复杂的部分。

如何指定打包生成的文件

webpack中提供 **output（输出）**属性来对输出文件进行控制，用法如下：

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

filename 规定了输出文件名，path规定输出文件位置。

3.总结

通过以上提到的属性 1.entry：指定输入文件 2.loader：导入解析文件 3.plugins：配置特殊处理 4: output：控制输出文件 webpack就已经获得了完成一次打包处理的最基本的信息，可以进行打包操作了。 但是这其中存在一个问题，是否在配置中需要列出所有需要的plugin并对其进行配置，才能正确的进行打包？ 对于常用的plugin组合方案是否可以不必重复配置？ 对此，webpack也有对应的处理，那就是本次要说的最后一个属性 mode（模式） 基本配置如下：

module.exports = {
  mode: 'production'
};

webpack 默认提供两种模式 development 和 production ，每种模式实际是一套常用的plugins配置。对打包进行优化。

至此，说明了webpack的最基本的打包功能，以及用户的配置是如何对这一过程产生影响的，事实上以上所说的 entry， loader， plugins， output 以及 mode。就是webpack最基本的五大概念，个人认为之后众多的功能可以归纳为以下四部分：

1. 为提高生产模式下代码运行效率，而在打包过程中进行的优化。
2. 为提高开发模式下开发效率而进行的优化。
3. 为适应不同使用场景，而对打包生成文件模式进行的调整。

上述内容将在后续更新。

ps： 上述内容均为个人理解总结，纯手打，如有表述不当，或错误之处恳请指正。