webpack基础篇（二）：webpack核心概念

说明

​​玩转webpack​​课程学习笔记。

Entry

Entry 用来指定 webpack 的打包入口。

1、依赖图的入口是entry.

2、Entry 的用法

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

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

多入口：entry 是一个对象。

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

Output

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

1、Output 的用法

单入口配置：

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

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

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

Loaders

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

1、常见的 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

2、Loaders 的用法

• ​​test​​：指定匹配规则
• ​​use​​​：指定使用的​​loader​​ 名称

const path = require('path');
module.exports = {
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

Plugins

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

1、常见的 Plugins

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
CleanWebpackPlugin	清理目录结构
ExtractTextWebpackPlugin	将css从bunlde文件里提取成一个独立的css文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundle
UglifyjsWebpackPlugin	压缩JS
ZipWebpackPlugin	将打包出的资源生成一个zip包

2、Plugins 的用法

放到 plugins 数组里

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
  output: { filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

Mode

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

1、Mode 的内置函数功能

名称	描述
development	会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production	会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
none	不开启任何优化选项