【前端】Webpack的安装与配置

Webpack简介

模块打包工具，通过入口将所有的依赖关系打包成静态资源。

基本功能

● 实现代码的转换（ES6转ES5，CSS转换）
● 文件优化（压缩代码体积，合并文件等）
● 自动简化代码
● 代码分割（公共模块的抽离，路由懒加载）
● 模块合并（功能分类合并模块）
● 自动刷新（热更新）
● 代码校验

安装和使用

• 使用npm i -D webpack webpack-cli安装webpack
• 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下基本配置

module.exports = {
	mode:'development'
	//mode 用来指导构建模式，可选值有development，production
}

• 在package.json的scripts节点下，新增dev脚本

"scripts":{
	"dev":"webpack"
	//scripts节点下的脚本可以通过npm run执行，如npm run dev
}

• 在终端中运行npm run dev启动webpack打包

loader简介

主要作用是让webpack拥有加载和解析非JS文件的能力。在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，Webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。

常用的loader：

• css-loader：和之后的sass-loader、less-loader一样，是将CSS文件转换为通用的源文件。
• style-loader：作用是在css、less、scss文件被转化处理好后，会通过style标签的形式挂载到html页面上。

使用步骤

• 使用npm安装对应的loader

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

• 修改webpack.config.js文件，配置module的rules选项，每个loader对应一个对象
• 配置项主要包括以下内容：
  • test：一个匹配loader所处理的文件扩展名的正则表达式
  • use：使用的loader数据类型：string｜array｜object

module.exports = {
	mode:'development',//开发模式
	module:{
		rules:[{
			test:/\.css$/,
			use:["style-loader","css-loader"]
		}]
	}
}

loader的加载顺序是从后向前的，所以先使用css-loader，再使用style-loader。

plugin简介

通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便。

常用插件：

• webpack-dev-server：每当修改了源代码，webpack会自动进行项目的打包和构建。
  • 安装webpack-dev-servernpm install webpack-dev-server@3.11.2 -D
  • 配置webpack-dev-server

"scripts":{
  "dev":"webpack-dev-server"
}

module.exports = {
	mode:'development',//开发模式
	module:{
		rules:[{
			test:/\.css$/,
			use:["style-loader","css-loader"]
		}]
	},
	entry:'./src/index.js',//指定打包的入口文件，从该入口开始构建
	output:{//打包后输出的文件名以及目标路径
		filename:"bundle.js",
		path:resolve(_dirname,"dist")
	},
	watch:true//监听修改，自动打包
}

再次运行npm run dev命令，重新进行项目的打包。

• html-webpack-plugin：可以通过插件自定制index.html页面的内容。

loader是一个转换器，将A文件进行编译成B文件。是为了实现plugin实现不了的功能。

webpack.config.js配置文件

其他常用配置

• devtool：文件的sourcemap产生方式，不同的方式生成的sourcemap文件不同；可基于sourcemap定位源码位置。
• resolve：解析第三方的包，也可以设置路径别名
• resolveLoader：专门针对Loader的，可以设置loader的寻找路径。
• devServer：webpack-dev-server的配置，是一个小型的node.js express服务器，用来实现一个静态服务