webpack学习之路—入门篇

1、什么是webpack?

首先是webpack对自己阐述：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
本人的理解：webpack说白了就是一款静态资源打包工具，运用模块化的理念对程序进行打包编译，并且这样的打包是可以高度自定义，用户可以通过配置在打包的过程中对项目资源作各种处理，其目的是更有利于浏览器运行处理。

2、webpack的安装

Wabpack的安装部分往往容易被人忽略但其实这也是相当重要的一部分。
首先webpack有全局安装也有局部安装
全局安装
npm i webpack -g
全局安装会把webpack安装在某个全局环境下，全局安装在命令行中的任何地方都是可以直接调用的。
局部安装
npm i webpack
npm i webpack --save
npm i webpack --save-dev
–save：将保存配置信息到pacjage.json的dependencies节点中。
–save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。
webpack安装注意事项
由于webpack现版本已经更新到webpack4了，当安装最新版本时有可能会出现一些问题
在webpack3中，webpack本身和它的CLI是在同一个包中的，但是在第4版中，他们已经将两者分开来了，这样会导致原来的命令用不了的情况，而这时命令行会提示你安装webpack-cli，安装上webpack-cli就行了。
提示如下：

3、webpack的核心

入口（entry）: entry会告诉webpack,它应该从哪里入手处理你的项目，入口文件里应当包含你项目的各种依赖关系，只有这样webpack才能顺藤摸瓜分析清楚你项目的结构，当然入口文件可以是一个也可以是多个，只有一个入口文件或者是使用数组传入几个入口文件，在没有使用一些抽离插件的情况下，webpack会一股脑地把所有的依赖文件（包括css）打包成一个js文件，而使用对象传入多入口文件的情况下webpack则会根据入口文件数量打包出多个js文件。
入口配置项:

类型	例子	含义
String	"./app/entry.js"	入口模块的文件路径，可以是相对路径
Array	['./app/entry1.js','./app/entry2.js']	入口模块的文件路径，可以是相对路径
Object	{a:'./app/entry1.js',b:'./app/entry2.js'}	配置多个入口，每个入口生成一个chunk

输出（output）: 输出指的就是webpack打包出来的文件了，在输出里可以配置文件的命名以及输出路径
filename可选变量：

类型	含义
id	Chunk的唯一标识，从0开始
name	`Chunk的名称
hash	Chunk的唯一标识的hash值
chunkhash	Chunk内容的hash值

加载器（loader）:webpack本身只会处理js文件，而一个项目中往往会有各种不同类型的文件，这些不同类型的文件想要让webpack来识别就必须使用loader，并配置loader，以此来告诉weback通过怎样的规则去识别处理非js文件。当然了，js文件也可以通过loader来处理，webpack社区也会有一些处理js的插件，如babel-loader，它可以将js的一些ES6的语法转换成大多数浏览器可以识别运行的语法。
插件（plugins）：webpack之所以强大，很大一部分原因就是它拥有数量极多功能极丰富的插件，通过这些插件webpack几乎无所不能。

4、实例配置

前面说了这么多，来个实际操作吧
webpack.config.js.

// webpack.config.js
var webpack = require('webpack')
path = require('path')
ExtractTextPlugin = require("extract-text-webpack-plugin")
HtmlWebpackPlugin = require('html-webpack-plugin')
CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {
	mode: 'development',
	devtool: 'inline-source-map',
	context: __dirname,
	// 入口文件
	entry: {
		app: './src/js/index.js' 
	},
	// 输出
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'js/[name]-[hash].js',
	},
	// 模块
	module: {
		rules: [
			// 处理图片文件loader配置
			{
				test: /.(jpg|png|gif|svg)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'images/[name].[hash:7].[ext]',
							publicPath: '../',
							outputPath: '/'
						}
					}
				]
			},
			// CSS文件处理，使用了抽离插件
			{
				test: /\.css$/,
				use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader'])
			},
		]
	},
	plugins: [
		// 生成html文件，并把打包出来的资源插入html,使用预先编写好的index.html作为模板
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: './src/index.html'
		}),
		//抽离出来的CSS输出配置
		new ExtractTextPlugin('css/[name].[hash:8].css'),
		//对于字体文件，本人使用直接copy过去的插件
		new CopyWebpackPlugin([
			{
				from: './src/iconfont',
				to: 'iconfont'
			}
		])
	],
	resolve: {
		alias: {
			'old-module': 'new-module'
		}
	},
	// devServer配置
	devServer: {
		https: false,
		host: 'localhost',
		port: 8080,
		contentBase: path.resolve(__dirname, ''),
		stats: "errors-only",
		index: './src/index.html',
		open: true,
		openPage: './src/index.html',
		overlay: {
			errors: true,
			warnings: true
		},
	}
}

源文件结构

生成dist结构