webpack学习笔记

webpack是一个模块化管理工具和打包工具，
可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。可以将按需加载的模块进行代码分隔，等到实际需要的时间再异步加载。

概念：
入口（entry）：从入口模块开始构建其内部模块依赖图，输出到bundles文件。
输出（output）：在哪个路径下输出创建的bundles。默认为./dist。
loader：将所有类型的文件转换为webpack能够处理的有效模块。module.rules中必须包含test和use属性。loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。
插件（plugins）：plugins数组中包含各种插件，供打包优化和压缩，一直到重新定义环境中的变量使用。通过require()插件，或者new一个实例。目的是解决loader无法实现的事情。
模式（mode）：启用相应模式下的webpack内置的优化。可选项：development，production

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path'); // Node.js中操作文件路径模块

module.exports = {
	mode: 'production',
  	entry: './path/to/my/entry/file.js',
  	output: {
    	path: path.resolve(__dirname, 'dist'),
    	filename: 'my-first-webpack.bundle.js'
  	}
  	module: {
	    rules: [
	      	{ test: /\.txt$/, use: 'raw-loader' }, // test用于标识出应该被对应loader转换的某些文件；use表示转换时使用的loader
	      	{ test: /\.css$/, use: 'css-loader' },
      		{ test: /\.ts$/, use: 'ts-loader' }
	    ]
	 }
	 plugins: [
	 	new webpack.optimize.UglifyJsPlugin(),
	   	new HtmlWebpackPlugin({template: './src/index.html'})
	 ]
};

module => chunks => bundle
module是模块，一个个功能内聚、封装良好的文件，对webpack来说，所有资源（.js、.css、.png）都是module。
chunk是webpack打包module过程中的一组依赖模块封装的结果。
bundle是module最终打包生成的输出文件。一般一个chunk对应一个bundle，如果配置了sourcemap，会出现一个chunk对应多个bundle。