Webpack学习一步到位

Webpack概念

webpack是一个静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

使用前提 下载webpack webpack-cli包 (webpack v4以上要装webpack-cli)

Webpack结构

 了解webpack先从理解webpack四个核心概念,认识webpack结构开始

• 入口 (entry)
• 输出 (output)
• 加载器 (loader)
• 插件 (plugins)

以及模式 (development 或 production)

以下是webpack.config.js配置文件

const path = require('path');	//路径模块
const Html = require('html-webpack-plugin');	//使用前先npm安装	一个有功能的插件

module.exports = {
	//入口	指定src文件下的index.js为入口文件,以实际情况为准
	entry: path.resolve(__dirname,"src/index.js"),

	//输出	指定dist文件下输出bundle.js文件,以实际情况为准
	output:{
		path: path.resolve(__dirname,"dist"),
		filename: "bundle.js"
	},

	//loader	让webpack能够去处理非js文件(webpack只能理解js文件)
	/*loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，
	然后就可以利用 webpack 的打包能力，对它们进行处理*/
	module:{		//加载器
		rules:[		//规则
			{ test: /\.txt$/, use: 'raw-loader' }
		]
	},

	//插件	webpack最强大的部分
	/*插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
	插件接口功能极其强大，可以用来处理各种各样的任务。*/
	plugins: [
		new Html({template: './src/index.html'})	//实现插件功能
	],

	//模式 
		/*包括 :
			开发模式(development)
			生产模式(production)	*/
	mode: "development"
}

---

结构配置

入口起点

默认为src目录下的index.js文件
如果不存在index.js文件,打包时采用

webpack --entry "./入口路径/文件名" --output "./输出路径/文件名"

或者在webpack.config.js 中指明入口

module.exports = {
	entry: "./src/index.js"
}

---

输出

默认为dist目录下的bundle.js文件
如果不存在文件夹或文件会自动创建
也可以自定义输出

webpack --entry "./入口路径/文件名" --output "./输出路径/文件名"

或者在webpack.config.js 中指明输出

const path = require('path');	//路径模块

module.exports = {
	entry: "./src/index.js",

	output:{
		//这里一定要是绝对路径
		path: path.resolve(__dirname,"dist"),
		filename: "bundle.js"
	}
}

---

loader

loader用于对模块的源代码进行转换。

loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

为什么要使用loader?
因为在开发中,不仅仅有基本的js代码要处理,要需要加载css 图片 字体图标等;
 需要将ES6代码代码降级ES5代码,TypeScript转ES5代码;
 将scss/less转css,将.jsx/.vue文件转成js文件.
webpack本身并不具备这些能力,webpack会将这些文件交给对应的loader处理

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript;
loader 可以将内联图像转换为 data URL;
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

打包css文件

要用到css-loader webpack处理css文件,css代码转成js代码
      style-loader 将css插入DOM中

1. 先安装上述两个包

npm install css-loader style-loader --save-d

2. 在入口文件里引入css文件

	//...
@import	"./css/index.css"

3. 配置webpack.config.js

module.exports = {
	//...
	module: {
		rules = [
  			{
  				//匹配css文件
  				test:/\.css$/i,
  				//有顺序,先处理css文件,再插入DOM
  				use:["style-loader","css-loader"]
			}
		]
	}
}

loader支持链式传递,比如css-loader处理后交给style-loader,
在最后一个 loader，返回 webpack 所预期的 JavaScript。

---

打包less文件

要用到less-loader     负责加载less文件
   less           负责将less转css
      css-loader
      style-loader

1. 先安装上述包

npm install css-loader style-loader less less-loader --save-d

2. 在入口文件里引入css文件

	//...
@import	"./css/index.less"

3. 配置webpack.config.js

module.exports = {
	//...
	module: {
		rules = [
  			{
  				//匹配less文件
  				test:/\.less$/i,
  				//有顺序,先处理less文件,然后处理css,最后插入DOM
  				use:["style-loader","css-loader","less-loader"]
			}
		]
	}
}

---

资源模块

webpack5之前不支持
 不支持前,使用以下三个loader

• raw-loader 将文件导入为字符串
• url-loader 将文件作为data URL内联到bundle
• file-loader 将文件发送到输出目录
  使用loader图片

module.exports.module = {
  //...
  rules = [
    {
  	  test:/\.(png|jpg|gif|jpeg)$/i,
  	  use:[
  	    {
  		  loader:'url-loader',
  		  options:{
  		    limit:8*1024
		  }
	    }
  	  ]
  	}
  ]
}

webpack5之后 依靠资源模块
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource
• asset/inline
• asset/source
• asset

使用资源模块处理图片:

module.exports = {
  //...
  module: {
   rules: [
     {
       test: /\.(png|jpg|gif|jpeg)$/i,
       //如果图片 < 8kb会自动转为base64
       type: 'asset'
     }
   ]
 },
}

使用资源模块处理字体图标:

module.exports = {
  //...
  module: {
   rules: [
     {
       test: /\.(eot|svg|ttf|woff|woff2)$/i,
       type: 'asset/resource',		//所有的字体图标文件都输出到dist文件下
       generator: {					//生成文件名 - 定义规则
       	filename: "路径/[name].[hash:6][ext]"	//使用hash值文件名避免重名
       }
     }
   ]
 },
}

---

使用Babel

将高版本js语法降级成兼容的低版本语法

1. 使用前先下包

npm install babel-loader @babel/core @babel/preset-env --save-d

2. 配置webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,		//不去匹配这些文件夹下的文件
      use: {
        loader: 'babel-loader',				//处理js文件
        options: {		//加载器选项
          presets: ['@babel/preset-env']	//降级规则
        }
      }
    }
  ]
}

---

插件

HtmlWebpackPlugin

HtmlWebpackPlugin简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。
这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：

要使用,先下包 npm install html-webpack-plugin --save-d

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
  	template:'./src/index.html'
  })],
};

使用前 文件结构

使用后 文件结构

且dist/index.html中引入了bundle.js文件