【webpack】webpack入门主要简单的介绍了下webpak以及实现了一个丐版的webpack配置,详细的内容我后

1. webpack介绍

webpack是一个用于现代javascript应用程序的 静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或者多个入口点构建一个 依赖图，然后将你项目中所需的每一个模块组合成一个或多个bundles, 它们均为静态资源，用于展示你的内容。

简单来说就是将你的项目中所有的js代码样式以及图片等资源打包处理后生成可以直接访问的静态资源。这个资源就是放在服务器上的，发布后可以访问登陆以及使用的应用

2. 基本概念

entry: webpack打包的入口起点，从这里开始根据各个文件之间的依赖来对文件进行打包。单页面应用 只有一个入口起点，相应的 多页面应用 则存在多个入口起点
output: 打包文件输出定义的地方，定义打包后输出文件的名字以及输出路径等
mode: 模式，webpack打包的模式，分为三种 development、production、null，其中默认不设置的时候是null，production时是生产环境打包，就是要发布线上的，具体却别后面讲
loader: 对javascript等文件进行预处理的，可以通过loader来构建包含javascript在内的任何静态资源
plugin:插件是用来解决loader解决不了的问题，它可以在webpack构建过程中任何一个节点来调用

3. entry(入口)

文件打包入口起点，分为单入口和多入口

单入口

// 方式一
{
  entry: './src/index.js'
}
// 方式二
{
  entry: {
      main: './src/index.js'
  }
}
// 以上两种效果是一样的，如果entry没有指定固定的key值，则key值默认是 main , 这个key值可能作为后面输出文件的文件名

多入口

{
  entry: {
    index: './src/index.js',
    foo: './src/foo.js'
  }
}
// 多入口既可以对应多出口，也可以只设置一个出口，在output中会介绍

4. output(出口)

通过配置output来告诉webpack如何向硬盘中输出写入文件，即使存在多个入口，也可以设置一个出口

单出口

// 这里只设置了一个单出口，所以不论入口有多少个文件，这里打包后生成的js文件就只有 bundle.js 这一个
{
  output: {
    filename: 'bundle.js'
  }
}

多出口

// 设置多出口时,需要使用占位符[name],这样输出的文件名则对应着entry中的文件名
{
  output: {
    filename: '[name].js'
  }
}

5. mode(模式)

在webpack配置中通常会看见一个字段mode，这个字段代表的是构建的文件是在生产环境中使用还是在开发环境中使用，它的可选值有三个，分别是production, development, null，默认时null。配置方式也很简单，如下：

{
  mode: 'production'
}

模式选择development时，构建出来的代码是没有经过压缩的
模式选择production时，构架拿出来的代码则是被压缩且去除了多余的注视，相当于减小了打包问价的体积，也算是一种优化方式。模式选择null时，既默认不加该配置，效果和development是一样的

6. loader

loader是webpack的文件加载器，能够加载资源文件，并对这些文件做些处理，比如压缩、编译、降级(将js新特性转成旧版浏览器可以识别的代码)，最后打包到一个文件中，同时处理一个文件可以用多个loader来处理，顺序是从下往上、从后往前，并且后面一个loader接受的参数是前一个loader处理完之后的内容。接下来使用处理css的laoder来做例子展示laoder的使用规则。
使用前先安装：npm install style-loader css-loader -D

{
    module: {
        rules: [{
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }]
      }
}

module属性下的rules就是配置loader的地方，rules是个数组，也就是允许匹配多种类型的文件来使用对应的loader来处理。rules中的test是使用正则表达式来匹配改类型的文件，然后使用所数组中的loader从后往前(或从上往下)一一执行，后一个loader的入参是前一个loader返回的内容。比如上面代码中的loader执行流程是，先使用css-loader将样式代码序列化，然后将返回的内容传给sytle-loader中，style-loader做的工作是创建一个style标签，然后将css-loader返回的内容写入进去。
use数组中的元素还可以是对象数据，可以用来传参数，以及某些loader的配置，这些等后面会再写一篇来介绍，如下：

{
    module: {
        rules: [{
          test: /\.css$/,
          use: [
              {
                  loader: 'style-loader',
                  options: {},
              }, 
              {
                  loader: ''css-loader'',
                  options: {},
              }
          ]
        }]
    }
}

7. plugin

插件的目的是在于解决loader不能解决的其他事情，因为webpack提供了很多开箱即用的插件，比如创建html模版的html-webpack-plugin等。插件功能如此强大主要是因为它内部提供了一个apply的方法这个方法可以访问webpack打包过程中的任何生命周期，可以是webpak在任何时机做该做的事情，如下：

{
  plugins: [
    new HtmlWebpackPlugin({
      template: './template.html',
      filename: 'index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

使用插件前需要将插件安装：npm install html-webpack-plugin clean-webpack-plugin -D
上面代码中，插件HtmlWebpackPlugin作用是以某个html文件为模版创建出另一个html文件，这个打包后生成的html文件会自动引入打包的js代码和样式文件等，解放了我们的双手，让开发不至于后面手动去创建一个这样的html文件。第二个插件CleanWebpackPlugin作用是在打包时生成打包文件前清除之前旧有的文件，这个好处是我们不需要每次打包前都手动删除文件(不过这个在webpack5中有其他配置，不需要再安装这个插件了)

8. 完整代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
    index: './src/index.js',
  },
  output: {
    filename: 'bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
      , {
        test: /\.js$/,
        use: 'babel-loader'
      }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './template.html',
      filename: 'index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

总结

以上是一个最简单版本的webpack配置，只是为了熟悉下，后面我会从0到1实现一个较为完成的webpack配置，同时也会为每一个模块都写一个详解，下次见。