webpack入门学习手记（一）

本人微信公众号：前端修炼之路，欢迎关注。

以前用过gulp、grunt，可是一直没有学习过webpack。这两天恰好有时间，学习了下webpack。webpack要想深刻研究，配置的东西比较多，网上的资源也有不少。我这里学习的主要途径是webpack官方给出的指南，和webpack中文网的翻译版本。由于我以为第一手资料确定是官网给出的更权威一些。

我学习的过程是，先看一遍中文网的文章，对每一节的内容有个大体印象和理解；而后再看一遍英文的官方文档，按照官方文档给出的示例配置文件照着作一遍。若是哪里英文理解有问题，再照着中文的文档反复思考一下。因此个人这篇文章，也有相似翻译英文官方文档。由于我就说照着文档操做，而后再把这个过程按照本身的理解从新整理成文章。

之因此这么作的缘由是，一方面要提升本身的英文文档阅读和理解能力，另外一方面是中文的文档通常都会更新得比较滞后和有很多错误，不能光按照中文手册去作。最后就是确定要动手本身操做一遍的，理解起来是一回事儿，操做起来就是另一回事儿了。

在这个过程当中，主要有一下几点心得：

• 后悔没有早点学webpack，功能太强大了。
• webpack功能和概念真多，感受一会儿学不完，只能用啥学啥。先整理出主要内容，细节一点点学习、补充。
• 经过一段时间的锻炼，阅读英文文档能力有所提升，须要继续努力。争取早日能彻底抛弃掉中文文档，最终能够翻译英文文档，输出英文文档。

如下是正文~

概念

在开始以前，必需要知道webpack涉及的概念。目前我学习webpack是最新的版本是v4.27.1，另外官网明确指出，从webpack 4 以上开始，就不在须要必须制定配置文件，可是仍然具有可扩展性。

为了学习webpack，须要理解的核心概念：

• Entry：入口
• Output：输出
• Loaders：loader
• Plugins：插件
• Mode：模式
• Browser Compatibility：浏览器兼容

Entry

entry说简单点，就是没有打包以前的原文件。能够指定一个文件、能够指定多个文件或者不一样目录下的文件。若是不指定，默认值为：./src/index.js。在配置文件中指定其余文件时，例如：

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

Output

output属性告诉webpack在哪里输出打包好的文件，以及如何命名这个文件。默认状况下是./dist/main.js，做为主要的输出文件，./dist目录就是输出的目录。

能够在配置文件中修改output属性来修改输出文件和目录，例如：

webpack.config.js

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.filename和output.path属性，告诉webpack打包文件的名字和打包文件的目录。其中的path模块是，Node.js模块。

Loaders

webpack只能识别JavaScript和JSON文件，Loaders容许webpack处理其余类型的文件。在webpack配置文件中，须要指定一下两个属性

• test：test属性告诉webpack哪些文件须要被转换。
• use：use属性告诉webpack相应的文件使用哪一个loader进行转换。

例如：

webpack.config.js

const path = require('path');

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

上面的配置中定义了一个module.rules属性，这个属性又有两个属性：test和use。这就好像告诉webpack编译器说：

”Hi，webpack编译器，当你发现任何后缀为.txt的文件时，请使用raw-loader先转换一下，而后再把转换后的内容添加到打包文件中。“

Plugins

Loaders是用来转换某些类型的模块，而插件能够作更普遍的工做，例如压缩、优化程序，甚至改变环境变量。

想使用一个插件，只须要经过require()这个插件，而后在plugins数组中添加这个插件。大多数的插件，都是支持修改配置的。例如：

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

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

在上面的例子中，使用html-webpack-plugin生成一个HTML文件，这个文件就是你的应用程序。在其中已经自动引用好了打包的文件。

Mode

经过设置mode属性，能够启动webpack内置的优化。你能够指定development、production、none，分别对应着不一样的环境。默认的是production。例如：

webpack.config.js

module.exports = {
  mode: 'production'
};
复制代码

Browser Compatibility

webpack 支持全部基于ES5的浏览器，可是IE8及如下是不支持的。由于webpack须要import()和require()。若是须要支持老版本浏览器，可使用loader解决。

---

以上就是webpack的核心概念。下一篇笔记整理webpack官方文档的指南手册，敬请关注。

（待续）

相关文章

webpack入门学习手记（一）

webpack入门学习手记（二）

webpack入门学习手记（三）

webpack入门学习手记（四）