webpack第2章 -- 核心概念

上一节的重点是搭建环境，通过一个简单的demo，对webpack打包的基本配置有了简单的认识。

接下来将介绍一下webpack的几个核心概念，其实官网已经讲得很详尽了，这里只是简单概括一下：

1、入口（entry）

entry是打包的入口文件。

（1）单入口：字符串形式

// 简写
module.exports = {
  entry: './src/index.js'
};

// 也可以写成对象形式
module.exports = {
  entry: {
    main: './src/index.js'
  }
};

（2）多入口：对象形式

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

2、输出（output）

output表示webpack打包后的输出。

配置output选项可以控制 webpack 如何向硬盘写入编译文件。

注意：
1、无论entry是单入口文件还是多入口文件，output的输出配置都只有一个
2、entry是单入口，output的filename可自定义
3、entry是多入口，outout的filename需要使用占位符

// filename 用于输出文件的文件名
// path 目标输出目录的绝对路径
module.exports = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

// 单入口文件
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

// 多入口文件
module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    // 使用了占位符，打包后的文件是./dist/app.js和./dist/search.js
    filename: '[name].js',  
    path: __dirname + '/dist'
  }
};

3、loader

webpack本身只支持js和json两种文件类型。

loader 可以将模块的源代码转换成webpack支持的文件类型。

// test 指定匹配规则
// use 指定使用的loader名称
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

4、插件（plugins）

插件目的在于解决 loader 无法实现的其他事。

插件用于bundle文件的优化，资源管理和环境变量的注入。

作用于整个构建过程。

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入new 实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

具体插件可以参考这里。 

5、模式（mode）

mode指定当前的构建环境。

module.exports = {
  mode: 'production'
};

 可配置项：development、production、none

选项	描述
development	默认会将 process.env.NODE_ENV 的值设为 deveplopment 。 启用 NamedChunksPlugin 和 NamedModulesPlugin 。
production	默认会将 process.env.NODE_ENV 的值设为 production 。 启用 FlagDependencyUsagePlugin,  FlagincludedChunksPlugin, ModuleConcatenationPlugin,  NoEmitOnErrorsPlugin,  OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin 。
none	不设置