【webpack】详解webpack入口(entry)、出口(output)、mode前言这次学习的是webpack

前言

这次学习的是webpack基本配置中的三个，entry(入口)、output(出口)、mode(模式)。我会尽量介绍这三个配置的用法以及一些不常用的配置。
首先package.json文件scripts命令下中添加命令 "build": "webpack --config ./webpack.config.js"或者是"build": "webpack",如果是后者，在执行npm run build的时候会默认匹配到webpack.config.js文件

1. entry

entry指示webpack应该使用哪个模块，来作为构建应用的入口。进入入口起点后webpack会找出哪些模块和是入口起点的直接或者间接的依赖，并将其打包到一起。

入口的默认值是'./src/index.js'，如果没有对webpack进行配置的同时'./src/index.js'文件也不存在，这个时候打包是会报错的，如下图 webpack.config.js配置

此时打包报错信息会提示不能处理'./src/index.js'，原因就是没有默认的这个入口

打包入口entry一般分为两类，一种是单入口，一种是多入口。接下来分别介绍 单入口 与 多入口 的写法以及配置

1.1 单入口

单入口 的写法比较简单，主要有两种方式：

// 第一种，字符串形式
{
    entry: './src/index.js'
}
// 第二种，数组形式
{
    entry: ['./src/index.js', './src/demo.js']
}

第一种方式只需要给一个打包入口地址就好，webpack会分析代码的依赖来讲用到的代码打包到一起。
第二种方式会将这两个文件以及其中所依赖的代码打包到同一个文件中

上面的两种写法是单入口的简单写法，这种写法默认的chunkname是main，它和下面的写法是一致的

// 第一种，字符串形式,chunkname名字可以自定义
{
    entry: {
        main: './src/index.js'
    }
}
// 第二种，数组形式,chunkname名字可以自定义
{
    entry: {
        main: ['./src/index.js', './src/demo.js']
    }
}

1.2 多入口

多入口 顾名思义就是打包入口有多个

// 多入口需要对应多出口，不然打包会报错,这里先给出一个打包出口，后面会细讲
{
    entry: {
        main: './src/index.js',
        foo: './src/index.js'
    },
    // 这里的[name]相当于是个占位符，值就是上面入口的key值，单入口时可以写死，不过不建议
    output: {
        filename: '[name].js'
    }
}

1.3 入口配置

打包入口不仅仅是写一个入口文件地址就可以了，它还有额外的配置，现在我们来用一下这些配置，虽然可能以后不会用，但是要知道有哪些并且是干嘛的

dependOn: 指当前入口文件所依赖的模块，这些模块必须在入口文件被加载前加载
filename: 指定要输出的文件名称
import: 启动时要加载的模块

{
  mode: 'development',
  entry: {
    index: './src/index.js',
    foo: './src/foo.js',
    shared: ['react', 'react-dom'],
    catalog: {
      import: './src/foo.js',
      filename: 'pages/catalog.js',
      dependOn: 'shared',
    },
  },
  output: {
    filename: '[name].js',
  }
}

dependOn：如上面代码所示，入口catalog有个依赖模块（dependOn），既shared(可以是安装的包，也可以是在入口这里定义的模块)，在catalog模块打包生成前，shared必须打包完成，他们有个前后关系。

import：其实就是需要加载的模块，没有其他配置时可以直接用catalog: './src/foo.js'来展示，就酱？
filename: 指定要输出的文件名称，这里如果设置了就不会受output中的filename和path影响，会生成这里指定的的文件路径和文件名，同时也支持上面的配置生成的文件如下图：

entry这块的内容差不多就这些，以后有学到新的内容再来这里更新。继续下一个知识点output。

2. output

output配置的作用是告知webpack如何向硬盘写入编译文件。需要注意的是entry可以存在多个入口，但是output却只能有一个出口配置。
用法：

module.exports = {
  entry: {
    index: './src/index.js',
  },
  // 第一种
  output: {
    filename: 'bundle.js',
  }
  // 第二种，多入口文件出口配置
  output: {
    filename: '[name].js',
  }
}

第一种：如上代码展示，第一种写法只是用于只有一个入口的webpack配置，如果有多个入口文件时使用这个固定文件名配置，在打包的时候会报如下错误。（意思是就是打包出来的文件名都一样，输出的文件都重复了怎么可能不报错呢？） 第二种：使用[name]占位符，这样打包时输出的文件名就和入口定义的文件名一样了(再也不用担心多入口打包会报错了)。

使用使用内部 chunk id

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js',
  },
};

使用由生成的内容产生的 hash：

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.js',
  },
};

2.1 path

path指的是打包后对应的输出文件路径，默认是打包到当前根目录下的dist文件中，当然有默认配置肯定会有自定义配置

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'main')
  }
}

如上配置，使用了path模块，这里的配置意思是以当前配置文件路径为绝对路径，输出文件路径在当前绝对路径下的main文件夹中

2.2 clean

这个配置的作用是和插件clean-webpack-plugin的作用是一样的，都是在生成新的包前把之前的包清除掉，有了这个配置后就不需要再引入清除文件插件了，用法也很简单：

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'main'),
    clean: true
  }
}

3. mode

mode配置选项告诉webpakc在打包时使用那种配置优化。在开发环境时由于经常调试，我们希望打包出来文件中的代码具有可读性同时可以调试。在生产环境时我们更希望打出来的包体积小，请求会更快，所以希望打包后代代码时压缩过的。

3.1 `mode`：development

一般在开发环境时使用develpment配置，这样打出来的包代码如下图

这样的代码是没有经过压缩的，同时注释还有注释

3.2 `mode`：production

一般在生产环境时使用production配置，这样打出来的包代码如下图

这样的代码是经过压缩处理的，去掉了注释，减小了文件的体积

【webpack】详解webpack入口(entry)、出口(output)、mode

前言