entry

• entry 用来指定webpack的打包入口
• 理解依赖图的含义
• 依赖图的入口是entry

• 对于非代码比如图片、字体依赖也会不断加入到依赖图中

  entry的用法

• 单入口：entry是一个字符串

  module.export = {
    entry: './path/to/my/entry/file.js'
  }

• 多入口：entry是一个对象

  module.export = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
  }

  Output

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

  Output的用法

• 单入口配置

  module.export = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js', // 通过占位符确保⽂件名称的唯⼀
        path: __dirname + '/dist'
    }
  }

• 多入口配置

  module.export = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js', // 通过占位符确保⽂件名称的唯⼀
        path: __dirname + '/dist'
    }
  }

  Loaders

  webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。
  本身是一个函数，接受源文件作为参数，返回转换的结果。

  常见的Loaders

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

Loader的用法

const path = require('path');
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' } // test 指定匹配规则, use 指定使⽤的 loader 名称
        ]
    }
};

Plugins

插件用于bundle文件的优化，资源管理和环境变量注入
作用于整个构建过程

常见的Plugins

Plugins的用法

const path = require('path');
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'}) // 放到 plugins 数组⾥
    ]
};

Mode

Mode ⽤来指定当前的构建环境是：production、development 还是 none
设置 mode 可以使⽤ webpack 内置的函数，默认值为 production