【webpack配置工程师】系列一（核心概念篇）

时间 2019-12-18

标签 webpack配置工程师系列核心概念繁體版

原文原文链接

前言

关于版本，咱们讲述的是 webpack 4.0 版本javascript

我但愿你们在用 webpack 前，要搞清楚，咱们为何要用 webpack ，它存在的意义是什么？css

webpack 基础概念

webpack 能够把它理解为一款工具，一款帮助咱们打包的工具，也能够称之为前端构建工具。html

简单来讲 webpack 作的事情就是将一些特别复杂且浏览器没法识别东西，经过 webpack 编译、打包后，生成了浏览器能够识别的静态资源。前端

webpack 都能作哪些事情，举几个栗子：java

文件打包（代码合并）
文件压缩（压缩体积）
代码转换（scss，less，es6）
代码分割（公共模块抽离）
模块合并（公共模块合并）
热更新（自动刷新）
代码校验
自动发布

咱们须要作的就是在配置文件中写好配置，而后剩下的工做 webpack 会帮咱们自动处理。node

在使用 webpack 前，咱们须要安装 Node.js 与 npm，webpack 是基于node编写的，而npm则用来安装依赖。jquery

webpack 文件结构

在安装开始前，我先说两个文件，以及它们的做用。webpack

package.json

在安装 webpack 前，咱们须要初始化一个 package.json 文件，它是项目的描述文件，它的内容是一个json对象。es6

例如：web

项目名称（name）
项目版本号（version）
项目描述（description）
npm 命令（scripts）
项目依赖（dependencies）

package.json 能够手工编写，也能够用npm命令自动生成。

{
  //项目名称
  "name": "chom",                                
  //版本号
  "version": "1.0.4",                             
  //项目描述
  "description": "前端基础工具库",                
  //入口文件
  "main": "dist/chom.min.js",
  //依赖模块,生产模式
  "dependencies": {},
  //项目开发所须要的模块,以及版本,开发模式
  "devDependencies": {							 
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "babel-loader": "^8.0.6",
    "eslint": "^6.7.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  //npm 命令行缩写
  "scripts": {									
    "test": "echo \"Error: no test specified\" && exit 1",
    //好比 npm run build 
    "build": "webpack --config build/webpack.config.js",     
    "lint": "eslint src/**"
  },
  //做者
  "author": "Zhangwenqiang",
  //项目许可证
  "license": "ISC"                              
}

复制代码

webpack.config.js

webpack 默认会读取 webpack.config.js 文件的配置信息，能够在webpack 源码中修改默认文件名，也能够按环境区分将webpack.config.js 拆分红多个文件，例如：webpack.base.js 、webpack.dev.js 、webpack.prod.js

webpack 结构组成

在了解 webpack 使用配置时，咱们必须首先要熟悉 webpack 中几个的核心概念。

mode

在 webpack 中有两种常见的模式，一种是 development（开发模式），一种是 production（生产模式）

module.exports = {
    mode: 'development'
}
复制代码

entry

entry 是 webpack 的入口文件

// 单个入口文件的简写语法

module.exports = {
    entry: './src/index.js' // entry 属性指定入口文件路径
};
复制代码

output

output 是 webpack 打包以后输出的文件

// 单个入口文件的简写语法

module.exports = {
    entry: './src/index.js',
    output: { // output 属性指定打包以后的文件放在什么位置
        // filename 属性指定输出文件的文件名称
        filename: 'bundle.js',
        // path 属性指定输出目录的绝对路径
        path: '/dist'
    }
};
复制代码

loader

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

由于 webpack 只能理解 JavaScript，因此须要 loader 将其它类型的文件转化为 webpack 可以处理的有效模块

不一样的 loader 完成不一样的任务，下面的例子指定使用 css-loader 处理 CSS 文件

npm install --save-dev css-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
};
复制代码

plugins

plugin 用于处理一些拓展任务，从打包优化和压缩，一直到从新定义环境中的变量

// 在打包过程当中会使用UglifyJsPlugin这个插件来对代码进行一些压缩整理等
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}
复制代码

webpack 安装流程

具体的安装流程 webpack的安装和配置 .

大概流程是下载node.js，初始化项目，安装 webpack 与 webpack-cli

webpack 配置概念

这里我会介绍一些 webpack 经常使用插件的概念以及为何要使用这些插件。

html-webpack-plugin

简单来讲 html-webpack-plugin 的基本做用就是生成html文件。

前面提到过，webpack 默认只能处理 javascript 文件，显然咱们的项目中不可能只存在js文件，咱们须要 webpack 将html也进行打包处理，这个时候就须要用到 html-webpack-plugin

html-webpack-plugin 还有一个重要的做用是会将html文件中引入的外部资源，自动建立一个正确的路径。

例如a.html 引入了 a.js ，但经过 webpack 打包会把a.js与其余js文件进行打包，而a.html引入的路径已经失效，此时 html-webpack-plugin 会自动将a.html引入的文件路径修改为已经打包后的文件路径。

具体的使用方法 html-webpack-plugin的使用

样式处理

webpack 处理css文件通常须要用到 css-loader 与 style-loader

css-loader 的做用是解析css中的import、url、require之类的语法，帮咱们分析出各个css文件之间的关系，把各个css文件合并成一段css

style-loader 的做用是将css-loader 生成的css代码挂载到页面的header部分，见下图：

若是项目中用到了scss或者less，都须要安装想对应的loader，具体的使用方法 webpack 打包样式

转化es6语法

为何要处理es6语法？

es6语法并非全部浏览器都支持、都能运行，一些浏览器若是不支持那么就会报错，致使用户体验很是糟糕，这个时候咱们就须要使用babel来将es6语法处理成es5语法，好比箭头函数、map()等语法特性，转换成浏览器可以识别的，低级的JS语法，就能够解决这个问题。

关于es6的兼容性，大概是这个样子滴：

Chrome 51 版起即可以支持 97% 的 ES6 新特性。
Firefox 53 版起即可以支持 97% 的 ES6 新特性。
Safari 10 版起即可以支持 99% 的 ES6 新特性。
IE Edge 15能够支持 96% 的 ES6 新特性。Edge 14 能够支持 93% 的 ES6 新特性。（IE7~11 基本不支持ES6）win10以后的浏览器是edge。以前的是IE。

具体的使用方法 webpack编译ES6

处理js语法校验

提到js语法校验，不得不提到 eslint

eslint 是什么？为何咱们要在项目中使用 eslint

eslint 是一个语法规则和代码风格的检查工具

它能够检测咱们编写的代码，给代码一个规范，项目中的代码必须按照这个规范编写

统一代码规范对咱们有哪些好处？

有些格式上的问题会致使咱们在发布生产环境时出现一些莫名的错误
团队协做，团队保持同一个风格编写代码，代码的可读性以及可维护性都较为友好

具体使用的方法 webpack引入eslint详解

全局变量引入

作项目时咱们可能会遇到这种场景：一个变量不少文件中都会用到，这变量多是第三方包（好比 Jquery ），也多是本身定义的一个工具类。

这种状况咱们怎么办？难道要在全部页面中都引用这个变量吗？答案是否认的，这样会形成项目的维护成本很高。

那么咱们该如何高效便捷的引入全局变量呢，其实有两种方式。

使用 webpack 模块注册全局变量
将变量暴露给 window 对象成为全局变量

这里要注意一下，webpack 是一个工具，在这个工具里面，有一个同名的模块，叫作 webpack，咱们就用这个模块给每个页面或者组件注入一个对象。

//以jquery为例
let Webpack = require('webpack')    // 引入webpack模块

module.exports = {
    plugins: [      // 这是一个插件，因此要在plugins属性中配置
        new Webpack.ProvidePlugin({
            $: 'jquery'
        })
    ],
}
复制代码

这样咱们直接就能够在页面或组件中直接使用jquery，例如：

console.log($)
复制代码

第二种方法，我在这里就不阐述了，感兴趣的同窗能够自行搜索，我我的仍是比较喜欢用第一种方法的（主要是懒，有点写不动了）。

图片处理

webpack 在处理图片上一般会使用 file-loader 、url-loader

file-loader 的做用

file-loader 能够用来帮助 webpack 打包处理 png jpg jepg等格式的图片;

file-loader 打包图片会生成一个hash值做为图片的名字;

url-loader 的做用

url-loader 能够将图片转换成base64的图片格式，能够减小网站的http请求，可是如果相同图片被引用屡次，每一次都转换成base64，会形成js性能损耗，所以是将图片资源转换为base64 仍是采用 http 的方式，要看图片具体的使用方式了。

这里要注意一下，url-loader内部封装了file-loader，url-loader不依赖于file-loader，即便用url-loader时，只须要安装url-loader便可，不须要安装file-loader。

打包文件分类

在使用 webpack 打包时，可能要将css归类到css目录下,img归类到img目录下，咱们也可能会在引用资源的时候加上域名前缀，这时候就用到了咱们的打包文件分类。

给图片归类到img目录下

rules:[
		
	{
		test:/\.(png|jpg|gif)$/,
		use:{
			loader:'url-loader',
			options:{	limit:2,//200k，小于200k使用base64来转换
			outputPath:'/img/'//大于上面的limit的图片就会生成到dist下的img文件夹下，同时全部路径都会加上这个img/
			}
		}
	}
]
复制代码

给css归类到css目录下

plugins:[
	new MiniCssExtractPlugin({
		filename:'/css/[name].[chunkhash:8].css',//抽离出来的css的文件名称，并在dist下生成css文件夹，将该文件放到该css目录下，引入的时候会自动加上/css/
	})
]
复制代码

对全部输出资源加域名前缀，在引用的资源前，统一加上这个额publicPath，好比打包后的css路径是 /css/main.css，那么引用的时候就会成为publicPath值+ /css/main.css

output:{
	filename:'bundle.[hash:8].js', 
	path:path.resolve(__dirname,'./dist'),
	publicPath:'http://www.yuhua.com',//在引用的资源前，统一加上这个额publicPath，好比打包后的css路径是css/main.css，那么引用的时候就会成为publicPath值+'css/main.css'
},
复制代码

结语

文章断断续续大概用了两周左右完成的，全当是本身对 webpack 知识点的复习与总结了，在这里吐槽一句（写文章真的很累），后续会更新 webpack 核心配置篇、webpack 性能优化篇.

感谢看到这篇文章的你，烦请帮忙为个人文章点几个赞同，让更多须要的朋友看到，很是感谢。

已工做的，祝您工做顺利，事业有成！还在学习的，祝您一切顺利，学业有成！