webpack使用

官网：https://webpack.docschina.org/

webpack的作用

如官网上的图片所示，就是通过webpack可以将左边的这些文件转换成浏览器识别的右边的这种类型的文件，文件的依赖关系可以保留。还可以将预编译的语言进行编译

入口（entry）
入口起点就是从那个文件开始，从这个文件可以逐渐找到其他文件的依赖关系，可以有多个不同的入口

输出
将输入的内容打包输出出来，上图中右边的文件就是输出的文件

loader
可以想象成是可以加载其他扩展语言的功能，比如说webpack本来只支持JavaScript和json的。通过loader就可以解析sass文件等

插件
插件就是具有某种特定功能的工具，比如说可以压缩文件

模式
就是打包的环境，比如开发环境，生产环境

安装webpack

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
用下面这个进行全局安装

npm install webpack webpack-cli -g

然后创建一个项目的文件夹，使用下面第一条命令初始化，第二条命令进行webpack的本地安装

npm init -y
npm install webpack webpack-cli --save-dev

简单使用实例

创建一个demo文件夹，然后使用命令安装webpack

npm init -y
npm install webpack webpack-cli --save-dev

接着在这个项目文件夹中新建src文件夹，在里面创建两个文件，index.js和data.json，index.js就是webpack的默认入口文件，而data.json是index.js中用来举例引用的

data.json文件的内容如下

{
	"username":"用户名"
}

然后输入下面命令进行打包
./src/index.js就是指定入口文件
-o是指定输出文件的放置位置
./dist/bundle.js就是打包之后的文件
--mode就是指定模式，development就是开发模式

webpack ./src/index.js -o ./dist/bundle.js --mode=development

下面这条就是生产环境打包（生产环境会进行压缩代码和代码混淆）

webpack ./src/index.js -o ./dist/bundle_production.js --mode=production

使用webpack配置文件进行打包

在原来demo项目的文件夹中创建一个名字叫webpack.config的js文件

然后就可以在webpack.config.js文件里面书写内容，配置打包的方式

首先要导入配置对象，对象里面书写配置内容，webpack.config.js如下

let path = require('path')
module.exports = {
	// 入口文件
	entry: "./src/index.js",
	output:{
		//输出的文件名称
		filename:"bundle.js",
		// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
		path:path.resolve(__dirname,'dist')
	},
	// 开发模式
	mode:'development'
}

执行打包命令

webpack

loader的使用

在原来的基础上创建一个css文件，然后在index.js中引入


因为webpack默认是不支持js中引入css的，所以要用到 loader
在webpack.config.js的配置文件中配置loader模块，内容如下

let path = require('path')
module.exports = {
	// 入口文件
	entry: "./src/index.js",
	output:{
		//输出的文件名称
		filename:"bundle.js",
		// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
		path:path.resolve(__dirname,'dist')
	},
	// 开发模式
	mode:'development',
	// loader的配置
	module:{
		// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种，所以要放置在一个数组里面
		rules:[
			{
				// 这里写的是正则表达式进行匹配文件
				test: /\.css$/,
				// use里面的内容是有顺序关系的，从下到上的解析顺序
				use:[
					// 将js的样式内容插入到style标签中
					"style-loader",
					// 将css文件转换为js
					"css-loader"
				]
			}
		]
	}
}

接着要安装刚刚的两个Loader模块，使用下面命令进行安装

npm install style-loader css-loader --save-dev

然后执行下面命令打包

webpack

插件的使用

举例：index.html跟index.js自动整合到一起，使用插件html-webpack-plugin
将原来项目中的index.html移动到src里面，然后将index.html里面的引入bundle.js的代码去掉

接着修改原来的webpack.config.js文件，如下

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	// 入口文件
	entry: "./src/index.js",
	output:{
		//输出的文件名称
		filename:"bundle.js",
		// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
		path:path.resolve(__dirname,'dist')
	},
	// 开发模式
	mode:'development',
	// loader的配置
	module:{
		// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种，所以要放置在一个数组里面
		rules:[
			{
				// 这里写的是正则表达式进行匹配文件
				test: /\.css$/,
				// use里面的内容是有顺序关系的，从下到上的解析顺序
				use:[
					// 将js的样式内容插入到style标签中
					"style-loader",
					// 将css文件转换为js
					"css-loader"
				]
			}
		]
	},
	// plugins插件配置
	plugins:[
		new HtmlWebpackPlugin({
			// 告诉HtmlWebpackPlugin html文件的位置
			template:'./src/index.html'
		})
	]
}

然后安装依赖，命令

npm install html-webpack-plugin --save-dev

打包图片资源文件

在项目原来的基础上，引入一张图片，然后在index.html中引入


修改webpack.config.js中的rules里面的配置，书写规则让webpack可以将图片打包进去

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	// 入口文件
	entry: "./src/index.js",
	output:{
		//输出的文件名称
		filename:"bundle.js",
		// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
		path:path.resolve(__dirname,'dist')
	},
	// 开发模式
	mode:'development',
	// loader的配置
	module:{
		// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种，所以要放置在一个数组里面
		rules:[
			{
				// 这里写的是正则表达式进行匹配文件
				test: /\.css$/,
				// use里面的内容是有顺序关系的，从下到上的解析顺序
				use:[
					// 将js的样式内容插入到style标签中
					"style-loader",
					// 将css文件转换为js
					"css-loader"
				]
			},{
				test:/\.(jpg|png|gif)$/,
				// 路径的解析
				loader:'url-loader',
				// 图片小于8kb，base64处理,优点是减少请求的数量，缺点就是使得体积更大
				options:{
					limit:8*1024,
					// 关闭掉ES6的解析，因为url-loader是用es6的模块化解析，会跟html-loader产生问题，解析出来有可能是object-module，所以要关闭url-loader的es6的模块化解析
					esModule:false,
					// [hash:10]取图片hash的前10位；；[ext]是取图片的扩展名
					name:'[hash:10].[ext]'
				}
			},{
				// 处理html的loader
				test:/\.html$/,
				loader:'html-loader'
			}
		]
	},
	// plugins插件配置
	plugins:[
		new HtmlWebpackPlugin({
			// 告诉HtmlWebpackPlugin html文件的位置
			template:'./src/index.html'
		})
	]
}

安装依赖，因为图片是文件还要安装file-loader

npm install file-loader url-loader html-loader --save-dev

模块热加载

通过devServer进行热加载，修改webpack.config.js的内容如下

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	// 入口文件
	entry: "./src/index.js",
	output:{
		//输出的文件名称
		filename:"bundle.js",
		// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
		path:path.resolve(__dirname,'dist')
	},
	// 开发模式
	mode:'development',
	// loader的配置
	module:{
		// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种，所以要放置在一个数组里面
		rules:[
			{
				// 这里写的是正则表达式进行匹配文件
				test: /\.css$/,
				// use里面的内容是有顺序关系的，从下到上的解析顺序
				use:[
					// 将js的样式内容插入到style标签中
					"style-loader",
					// 将css文件转换为js
					"css-loader"
				]
			},{
				test:/\.(jpg|png|gif)$/,
				// 路径的解析
				loader:'url-loader',
				// 图片小于8kb，base64处理,优点是减少请求的数量，缺点就是使得体积更大
				options:{
					limit:8*1024,
					// 关闭掉ES6的解析，因为url-loader是用es6的模块化解析，会跟html-loader产生问题，解析出来有可能是object-module，所以要关闭url-loader的es6的模块化解析
					esModule:false,
					// [hash:10]取图片hash的前10位；；[ext]是取图片的扩展名
					name:'[hash:10].[ext]'
				}
			},{
				// 处理html的loader
				test:/\.html$/,
				loader:'html-loader'
			}
		]
	},
	// plugins插件配置
	plugins:[
		new HtmlWebpackPlugin({
			// 告诉HtmlWebpackPlugin html文件的位置
			template:'./src/index.html'
		})
	],
	// 热重载
	devServer:{
		// 项目构建的路径
		contentBase:path.resolve(__dirname,"dist"),
		// 启动gzip压缩，使浏览器打开页面更快
		compress:true,
		//设置端口号
		port:3000
		//自动打开浏览器
		open:true
	}
}

安装依赖

npm install webpack-dev-server -g

启动项目

webpack-dev-server

如果报错很多依赖没有安装，使用下面命令安装一下

npm install

然后再使用启动项目命令启动