webpack4基础入门操作（二）（讲解下webpack的配置内容）

前序：我之所以开始写这个系列，是因为我最近出去看了下外面的情况，发现技术更新的脚步太快了。我的技术栈已经完全落伍了。

所以准备今年学习写新的东西，而React、webPack4就是我的第一步。前面我看了React的相关内容后，不太明天如何打包，所以有了写这个系列的想法。

上一章讲到：在package.json文件中添加“scripts”配置："build": "webpack --progress --colors"，就可以在控制台直接使用npm run build做编译。为啥呢？

今天要讲解最基础的内容：webpack4的基础配置元素：（以下内容本人都是学习官网）

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)
• 模式

入口（entry）：就是告诉打包工具，模块的门在哪里。指定初始运行的JS文件，并根据此文件构建其内部依赖图。

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

输出（output）：就是告诉打包工具，你打包集成的文件放哪里，名称叫啥。输出对应的打包文件。

const path = require('path');

module.exports = {
  entry: './path/my/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'myfirstbundle.js'
  }
};

loader：webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），如：css、ts等。

const path = require('path');

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

module.exports = config;

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

插件（plugins）：loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，除了转换以外的事情。

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 提供许多开箱可用的插件！查阅我们的插件列表获取更多信息。

模式 ：通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

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

到了这里我们已经有了一个基本的概念。问题是：现在都是一个入口和一个输出。真正的项目不可能这样。那么如何多个入口呢？

其次常用的插件库有哪些？作用是啥？ 常用的loader有哪些？作用是啥？都不清楚。所以我们还是菜鸟中的菜鸟。只是站在门口看了一眼，还只是看见了一角，所以继续后续吧。

就到这，我也才开始学习，我后面基本会保持两天一更的。努力吧，少年~