webpack教案

webpack教案

了解webpack

webpack是前端资源构建工具，静态模版打包器，将不同的资源文件解析打包成css、js、img文件

webpack中主要的几个模块

1. entry
   以哪个文件为入口文件，入口文件为起点开始打包分析内部的依赖图
2. output
   输出打包后的资源bundle 取什么名字，打包到哪里
3. loader
   翻译webpack不能够处理的文件
4. plugins
   打包 优化 压缩
5. mode
   定义当前打包出来的文件使用的模式，不同模式默认有不同的插件进行默认的不同优化

• 开发环境
  development 能够让代码调试运行的环境，需要做的是代码调试，自动刷新、编译、打开浏览器
• 生产环境
  production 能够让代码优化上线运行的环境，文件结构清晰，压缩，兼容性足够好
  

安装webpack

1. 安装
   全局安装
   npm i webpack webpack-cli -g
   项目中安装
   生成配置文件 npm init / npm init -y
   npm i webpack webpack-cli --save-dev

2. 打包处理
   将js代码写入src文件夹下的index.js文件，使用webpack处理当前文件，打包到aa.js文件中使用如下
   webpack ./src/index.js -o ./aa.js --mode=development
   注： --mode=development是将环境设为开发环境，不同环境打包出来的内容不同，product打包出来的内容是经过压缩了的，development没有压缩； webpack本身能够处理js / json资源，不能处理的文件资源需要通过loader和plugin处理

打包文件的名利比较长，所有平时都简化这个过程，会有相应的打包配置文件webpack.config.js，执行webpack的时候会默认查找webpack.config.js文件中的信息在进行打包，基础配置如下

module.exports = {
	// 打包的入口文件
    entry: './index.js',
    // 打包的出口文件配置
    output: {
    	// 打包的文件名
        filename: 'aa.js',
        // 文件打包的路径，resolve是nodejs提供解决路径的方法
        path: resolve(__dirname, 'dist')
    },
    // 打包的模式
    mode: 'development'
}

webpack打包资源文件

webpack打包除了loader和plugin的资源文件需要使用loader解析其他的文件，打包进js中，下面就是打包几种常用资源所有使用loader的办法， 打包资源文件的第一个步就是安装，安装之后在导出内容中添加module进行配置，基本上解析资源文件的过程都这样

打包css样式文件

1. 安装loader
   npm i css-loader style-loader -D
2. 配置配置文件

module.exports = {
  // 配置loader  通过loader 翻译 webpack不能处理的文件
  module: {
      rules: [
      // 处理css的loader配置
      {
          // 匹配需要翻译的文件
          test: /\.css$/,
          // style-loader 进字符串嵌入到新建的style中 并且添加到head节点中
          // css-loader 将css转成字符串并且载入到js中
          use: ['style-loader', 'css-loader']
      }]
  }
}

打包less文件

less 文件属于css预编辑器，处理预编辑文件跟处理css差不多，不一样的是需要多安装处理当前文件的loader，比如打包less需要安装less less-loader,在css基础上再安装着两个

1. 安装loader
   npm i css-loader style-loader less less-loader -D
2. 配置配置文件

module.exports = {
   // 配置loader  通过loader 翻译 webpack不能处理的文件
   module: {
       rules: [
       // 处理css的loader配置
       {
           // 匹配需要翻译的文件
           test: /\.less$/,
           // style-loader 进字符串嵌入到新建的style中 并且添加到head节点中
           // css-loader 将css转成字符串并且载入到js中
           // less-loader 就是用来处理less文件的
           use: ['style-loader', 'css-loader', 'less-laoder']
       }]
   }
}

打包图片

1. 安装loader
   npm i url-loader file-loader -D(–save-dev)
2. 配置loader

module: {
  rules: [
  	{
  	   test: /\.(png|jpg|jpeg|svg)$/,
       loader: 'url-loader',
       options: {
           limit: 8 * 1024,
           // 图片在html中的时候  使用的是commonjs引入图片
           esModule: false,
           name: '[hash:6].[ext]',
           outputPath: 'img'
       }
  	}
  ]
}

打包html中的图片

1. 安装loader
   npm i html-loader -D
2. 配置loader

{
    test: /\.html$/,
    loader: 'html-loader'
},

打包其他资源

打包其他资源需要的loader与图片需要的loader有相似处， 就是file-loader，在之前已经安装过了

{
  // include 包含的意思
  // exclude  排除
  exclude: /\.(html|css|js|png|jpeg|jpg|eot|ttf|svg|woff|woff2)/,
  // file-loader
  loader: 'file-loader',
  options: {
      name: '[hash:6].[ext]',
      outputPath: 'static'
  }
}

webpack使用插件

插件是解决压缩、不同模式的优化，如增加打包速度，开发环境代码调试等功能的，基本上插件使用有三步，1安装，2引入，3使用，所以下插件基本上基于这三步进行操作的

清除打包之前已经打包的文件

由于在打包过程中使用了命名匹配，每次打包出来生成的文件名不同，就会导致打包的文件夹中文件越来越多，所以使用clean-webpack-plugin帮助我们在打包之前将之前打包的文件删除

1. 安装插件
   npm i clean-webpack-plugin -D

2. 引入插件
   let {CleanWebpackPlugin} = require(‘clean-webpack-plugin’)

3. 使用插件
   plugins: [new CleanWebpackPlugin()]

使用HTML模板

html-webpack-plugin自动生成html文件，或者使用一个现有的HTML作为模板自动在文件中引入打包出来的js以及css

1. 安装插件
   npm i html-webpack-plugin -D

2. 引入插件
   let htmlWebpackPlugin = require(‘html-webpack-plugin’)

3. 使用插件

plugins: [new htmlWebpackPlugin([{
	//使用模板
	template: 相对路径，
	// 压缩HTML文件
	minify: {
	// 移除空格
	collapseWhitespace: true,
	//移除注释
	removeComments: true
}])]

css提取到css文件

线上项目为了清楚地显示项目结构会将项目中的css提取到css文件中，需要借助mini-css-extract-plugin插件

1. 安装插件
   npm i mini-css-extract-plugin -D
2. 引入插件
   let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
3. 改变module中的style-loader,用提取文件中的loader替换

module.exports = {
   // 配置loader  通过loader 翻译 webpack不能处理的文件
   module: {
       rules: [
       // 处理css的loader配置
       {
           // 匹配需要翻译的文件
           test: /\.less$/,
           // style-loader 进字符串嵌入到新建的style中 并且添加到head节点中
           // css-loader 将css转成字符串并且载入到js中
           // less-loader 就是用来处理less文件的
           use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-laoder']
       }]
   }
}

5. 使用插件
   在插件中使用当前插件，定义提取的css文件的一些属性，如文件名，是否压缩到等

plugins: [
	new MiniCssExtractPlugin({
		filename: 'css/built.css'
	})
]

压缩css

css文件提取出来后，在生产环境会将其进行压缩

1. 安装插件
   npm i optimise-css-assets-webpack-plugin -D
2. 引入插件
   let OptimiseCssAssetsWebpackPlugin= require(‘optimise-css-assets-webpack-plugin’)
   3.使用插件

plugins: [
	new OptimiseCssAssetsWebpackPlugin()
]


#### css兼容性问题
增加css对不同浏览器的兼容性，postcss-preset-env在css语法中增加了-webkit -moz -ms 等前缀
1. 安装插件
npm i postcss-loader postcss-preset-env  -D
2. 使用
在module中配置loader

```js
use: [
   MiniCssExtractPlugin.loader, 
   'css-loader',
   {
       loader: 'postcss-loader',
       options: {
           idet: 'postcss',
           // 使用插件去解决css中部分浏览器不兼容的样式
           plugins: () => [require('postcss-preset-env')()]
       }
   }
]

配置解决浏览器兼容性的版本，在package.json 或者配置文件中增加如下配置信息

"browserslist": {
  "development": [
     "last 1 chrome version",
     "last 1 firefox version"
   ],
   "production": [
     "> 0.1%"
   ]
 }

语法检查eslint

代码检查需要的loader是 eslint-loader eslint
javascript代码检查需要插件 eslint-config-airbnb-base eslint-plugin-import eslint

1. 安装插件
   npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

2. 使用loader
   在module中配置loader

module: {
  rules: [{
  	test: /\js$/,
  	// 排除第三方数据库检查，只检查自己的源代码
  	exclued: /node_modules/,
  	laoder: "eslint-laoder",
  	options: {
  		// 将自动修复eslint错误设置为true
  		fix: true,
  		// 在js解析前检查代码编写格式错误
  		enforce: true
  	}
  }]
}

3. 在package.json中配置
   最后需要在package.json中配置eslint版本，以及定义eslint检查格式等

eslintConfig: {
	extends: "airbnb-base"
}

js兼容性处理

• js基本语法兼容性处理preset-env

1. 安装插件
   npm i babel @babel/core @babel/preset-env -D
2. 配置loader

{
	test: /'.js$/,
	loader: "babel-loader",
	options: {
		presets:["@babel/preset-env"]
	}
}

• 全部js兼容性处理 polyfill
  早期使用polyfill解决兼容性问题，core-js 代替polyfill解决目前问题

1. 安装
   npm i @babel/polyfill -D
2. 使用

// 在运行代码的最后引入polyfill,然后解决模块兼容性问题
import "@babel/polyfill"
const promise = new Promise(function(){
	// 解决兼容模块
})

• 按需加载
  使用corejs解决兼容性问题，这个只会把项目中使用的有兼容性的地方问题解决，不会引入所有模块，polyfill就是会引入所有模块

1. 安装
   npm i corejs@3 -D
2. 配置loader

{
	test: /'.js$/,
	loader: "babel-loader",
	options: {
		presets:[
			["@babel/preset-env", {
				useBuiltIns: 'usage',
				corejs: {
					version: 3
				},
				targets:{
					// 配置兼容的浏览器版本
					chrome: '60',
					ie: '9'
				}
			}]
		]
	}
}

启用服务器

在访问打包文件时，每次打开的都是静态文件，而且每次修改了之后只能重新刷新页面，webpack-dev-server 使用nodejs启用服务器功能帮助启用服务器以及热更新功能

1. 安装插件
   npm i webpack-dev-server -D

2. 配置服务器属性

devServer: {
	// 构建后的路径
	contentBase: resolve(__dirname + '文件名'),
	// 是否压缩
	compress: true,
	// 启用的端口名
	port: 9000,
	// 是否自动在浏览器中打开页面
	open: true
}

3. 启用服务器命令
   npx webpack-dev-server

热更新

开发环境打包源代码，注重代码成型速度，页面发生改变能够及时反馈到页面上显示，不希望刷新整个页面呈现所展示的内容，简单来说就是一个模块发生改变只更新当前这个模块，提升速度。更新内容有html、css、js

1. 样式
   如果需要样式热更新，就不用把css提取到css文件中，style-loader中自带有内部实现方法，只需要在配置服务器的地方添加hot属性

devServer: {
	// **添加hot属性**
	hot: true,
	// 构建后的路径
	contentBase: resolve(__dirname + '文件名'),
	// 是否压缩
	compress: true,
	// 启用的端口名
	port: 9000,
	// 是否自动在浏览器中打开页面
	open: true
}

2. js模块
   js模块是热更新的重点，入口文件不能热更新，之后非出口文件中的其他内容更改才能热更新处理办法如下，在所有代码（或者入口文件）的最后

if(module.hot) {
	module.hot.accept("./print.js", function() {
		// 这里启动热更新，调用模块中的方法
		print();
	})
}

4. html文件
   HTML文件时不能热更新的，但是希望修改了HTML文件之后能够刷新整个页面，需要在入口文件的地方配置html文件路径如下

entry: ['./index.js', './public.index.html']

调试代码source-map

在没有配置source-map的时候所有，代码出现报错，报错的地址指向打包出来的js模块中，代码具体报错行数、页面以及报错信息指向都不是很正确，所以需要引入代码映射到源代码报错的地方，追踪源代码错误，配置方式如下

// 调试工具，追送源代码的方式，source-map是其中一种
devtool: "source-map" 
/*
还有如下几种调试方式
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
inline-source-map  映射在打包的js问价中  速度快
eval-source-map   映射在打包的js问价中  多了hash值
hidden-source-map 映射另生成一个js文件
source-map   映射另生成一个js文件
cheap-module-source-map   映射另生成一个js文件 
cheap-source-map   映射另生成一个js文件
生产环境要求代码运行速度以及隐藏源代码
开发环境要求调试友好速度快
速度快： eval > inline > cheap
测试友好： source-map > cheap-module > cheap
代码隐藏、速度： nosources > hidden > source-map
最终
开发环境: eval-[cheap-[module-]]source-map
生产环境： source-map / cheap-[module-]source-map
*/