核心概念

1. 核心概念之entry

概念介绍

entry：用来指定webpack的打包入口。
为什么叫entry呢，因为webpck中的所有资源都会被当成模块，只有通过入口文件，到它的依赖的其他资源，最终形成依赖树才能加载所有的依赖资源。

基本用法

单入口：

module.exports = {
    entry: "./src/index"
}

多入口：

module.exports = {
    entry: {    
      index: "./src/index",    
      login: "./src/login"
    }
}

2. 核心概念之output

概念介绍

output：用来告诉webpack如何将编译后的文件输出到磁盘

基本用法

单入口配置

const path = require('path');
module.exports = {
    entry: "./src/index",
    output: {
        path:path.join(__dirname, "dist"),
        filename: "index.js"
    }
}

多入口配置：通过占位符来确保文件名称的唯一

const path = require('path');
module.exports = {
    entry: {
        index: "./src/index",    
        login: "./src/search"
    },
    output: {
        path:path.join(__dirname, "dist"),
        filename: "[name].js"
    }
}

3. 核心概念之loader

概念介绍

webpack默认只支持JS和JSON，通过loaders可以支持其他类型，并转化为有效的模块。
loader本身是一个函数，接受源文件作为参数，返回转化后的结果。

常见的loaders

• babel-loader：转换ES6、ES7等语法特性
• css-loader：支持.css文件的加载和解析
• less-loader：将less文件转化为css
• ts-loader：将TS转化为JS
• file-loader：进行图片字体等的打包
• raw-loader：将文件以字符串的形式导入
• thread-loader：多进程打包CSS和JS

  基本用法

  它的用法是，在module下面有一个rules数组，数组的每个对象包含了test用于指定文件名格式，use用于指定用什么loader去加载此类文件。

module.exports = {
  module: {
    rules: [{
      test: /\.txt$/, use: 'raw-loader'
    }]
  }
}

4. 核心概念之plugins

概念介绍

通常用于loaders输出后的文件内容的优化，包含资源管理、环境变量的注入。
可以理解为用loaders无法做的事情，都交给plugins来做。

常用的plugins

• CommonChunsPlugin，把被多个chunks都依赖的模块代码提取成公共的js
• CleanWebpackPlugin，清理构建目录
• ExtractTextWebpackPlugin，将CSS从bundle文件里提取成独立的CSS文件
• CopyWebpackPlugin，将文件或文件夹拷贝到构建的输出目录
• HtmlWebpackPlugin，创建html文件去加载输出的bundle
• UglifyjsWebpackPlugin，压缩js
• ZipWebpackPlugin，将打包出的资源生成一个zip包

  基础用法

  module.exports = {
    plugins:[
        new HTMLWebPlugin({template: "./src/index.html"})
    ]
  }

  5. 核心概念之mode

  概念介绍

  用于指定打包时候的构建环境，分为：production、development、none。

mode的内置函数功能

官方文档中的表格介绍了每个mode下都做了什么具体单事情，其中none意味着任何优化都没有做。