webpack之核心概念

一、环境搭建

• 创建空目录和 package.json

- mkdir my-project
- cd my-project
- npm init -y

• 安装 webpack 和 webpack-cli

npm install webpack webpack-cli --save-dev
检查是否安装成功：./node_modules/.bin/webpack -v

二、Entry

• 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

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

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

• 多入口：entry 是一个对象

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

二、Output

• 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件

• 单入口配置

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

• 多入口配置

// 通过占位符确保文件名称的唯一
const path = require('path');

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

三、Loader

• webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其他文件类型并把他们转化成有效的模块，并且可以添加到依赖图中
• 本身是一个函数，接收源文件作为参数，返回转换到结果
• test：指定匹配规则
• use：指定使用的 loader 名称

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

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ 
    	test: /\.txt$/, use: 'raw-loader'
    }],
  },
};

• webpack 编译器当碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在对它打包之前，先 use raw-loader 转换一下
• 使用正则表达式匹配文件时，你要为它添加引号

四、Plugin

• 打包优化，资源管理，注入环境变量；
• 作用于整个构建过程；
• 在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例；

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

• 例：html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle

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

module.exports = {
  module: {
    rules: [{ 
    	test: /\.txt$/, use: 'raw-loader' 
    }],
  },
  plugins: [
  	new HtmlWebpackPlugin({ 
  		template: './src/index.html'
  	})
  ],
};

五、Mode

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

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