逆战2020年你不能不知道的webpack基本配置!

前言

很开心今天分享一篇本身步入开发以来经历webpack事儿总结了一些知识点 -分享给广大前端爱好者,但愿对你们能有所帮助~ 😀
在好久好久之前，在咱们前端还只是页面切图仔的年代，咱们开发一个html页面，一般会遇到这些状况：

• 须要引入十几个css和js文件，并且由于他们彼此间有着依赖关系，因此引入的顺序还不能乱。
• 传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。
• 代码复用性差，可维护性差。

此时就须要一个处理这些问题的工具，webpack应运而生。

webpack能够看作是模块打包工具：它将各类静态资源（好比：javaScript 文件，图片文件，css文件等）视为模块，它可以对这些模块进行解析优化和转换等操做，最后将它们打包在一块儿，打包后的文件可用于在浏览器中使用。

webpack的优势：

• 代码转换: typeScript 编译成 javaScript、scss，less 编译成 css.
• 文件优化：压缩 javaScript、css、html 代码，压缩合并图片。
• 代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载。
• 模块合并：在采用模块化的项目里会有不少个模块和文件，须要构建功能把模块分类合并成一个文件。
• 自动刷新：监听本地源代码的变化，自动从新构建、刷新浏览器。
• 扩展性强，插件机制完善。

webpack打包过程：

1. 利用babel完成代码转换,并生成单个文件的依赖
2. 从入口开始递归分析，并生成依赖图谱
3. 将各个引用模块打包为一个当即执行函数
4. 将最终的bundle文件写入bundle.js中

Webpack 的四大核心：

• entry：js 入口源文件
• output：生成文件
• loader：进行文件处理
• plugins：插件，比 loader 更强大，能使用更多 webpack 的 api

Entry

webpack 应该使用哪一个模块作为入口文件，来做为构建其内部依赖图的开始。进去入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，每一个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

单⼊⼝：entry 是⼀个字符串

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

多⼊⼝：entry 是⼀个对象

module.exports = { 
entry: { 
index: './src/index.js',
manager: './src/manager.js'
   }
 }

Output

告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，这些均可以在webpack的配置文件中指定。

单⼊⼝配置

module.exports = 
{ entry: './src/index.js',
output: { 
filename: 'bundle.js’,
path: \_\_dirname + '/dist'
  } 
};

多⼊⼝配置

module.exports = {
entry: { 
app: './src/app.js', 
search: './src/search.js' 
}, output: { 
filename: '\[name\].js',
path: \_\_dirname + '/dist'
 }
}

经过[name]占位符确保⽂件名称的惟⼀

Loader

loader 让 webpack 可以去处理那些非 javaScript 文件（webpack 自身只理解 javaScript）。loader 能够将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。

loader的特色

• 一个Loader 的职责是单一的，只须要完成一种转换
• 一个Loader 其实就是一个Node.js 模块，这个模块须要导出一个函数
• loader 老是从右到左地被调用。

经常使用的loader

处理样式

• css-loader: 加载.css 文件，
• style-loader:使用 style 标签将 css-loader 内部样式注入到咱们的 html 页面
• less-loader, sass-loader: 解析css预处理器

处理 js

• 让你能使用最新的js代码（ES6，ES7...）
• 让你能使用基于js进行了拓展的语言，好比React的JSX；

处理文件

处理图片资源时，咱们经常使用的两种loader是file-loader或者url-loader，二者的主要差别在于。url-loader能够设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减小请求次数

处理.vue文件

vue-loader 是 webpack 的加载器模块，它使咱们能够用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块容许 webpack 使用单独的加载器模块（例如 sass 或 scss 加载器）提取和处理每一个部分。该设置使咱们可使用 .vue 文件无缝编写程序。

开发一个loader

需求：手写一个 loader，将 'kobe' 转换成 'Black Mamba'。固然你们能够根据本身的需求进行设计。这里只是讲解方法。

一、编写 loader

在根目录下，新建目录 kobe-loader 做为咱们编写 loader 的名称，执行 npm init -y 命令，新建一个模块化项目，而后新建 index.js 文件，相关源码以下：

module.exports = function(content) { return content && content.replace(/kobe/gi, 'Black Mamba') }

二、注册模块

正常咱们安装的 loader 是从 npm 下载安装，可是咱们能够在 kobe-loader 目录底下使用 npm link 作到在不发布模块的状况下，将本地的一个正在开发的模块的源码连接到项目的 node_modules 目录下，让项目能够直接使用本地的 npm 模块。

npm link

而后在项目根目录执行如下命令，将注册到全局的本地npm模块连接到项目的node_modules下

$ npm link kobe-loader

注册成功后，咱们能够在node_modules目录下能查找到对应的loader。

三、在 webpack 中配置 loader

在webpack.base.conf.js加上以下配置

{ 
test:/\\.js/,
loader: 'kobe-loader'
}

此时，咱们在全部 js 文件下书写的'kobe'就所有替换成'Black Mamba'了。

四、配置参数

上面咱们是写死的替换文案，假如我想经过配置项来改变，能够在 loader 中作如下调整

// custom-loader/index.js 
var utils = require('loader-utils') 
module.exports = function (content) { 
const options = utils.getOptions(this) 
return content && content.replace(/kobe/gi, options.name)
} 
// webpack.base.conf.js
{ test:/\\.js/,
use: { loader: 
'kobe-loader', 
options: { name: 'kobe', 
  } 
 } 
}

Plugin

专一处理 webpack 在编译过程当中的某个特定的任务的功能模块，能够称为插件。

Plugin 的特色

• 是一个独立的模块
• 模块对外暴露一个 js 函数
• 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法 apply 函数中须要有经过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，若是是异步编译插件的话能够拿到回调 callback
• 完成自定义子编译流程并处理 complition 对象的内部数据
• 若是异步编译插件的话，数据处理完成后执行 callback 回调。

经常使用Plugin

• HotModuleReplacementPlugin 代码热替换。由于 Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。
• HtmlWebpackPlugin, 生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
• ExtractTextPlugin, 将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引发页面样式加载错乱的现象。
• NoErrorsPlugin报错但不退出 webpack 进程
• UglifyJsPlugin，代码丑化，开发过程当中不建议打开。 uglifyJsPlugin 用来对 js 文件进行压缩，从而减少 js 文件的大小，加速 load 速度。uglifyJsPlugin 会拖慢 webpack 的编译速度，全部建议在开发简单将其关闭，部署的时候再将其打开。多个 html 共用一个 js 文件(chunk)，可用 CommonsChunkPlugin
• purifycss-webpack  。打包编译时，可剔除页面和 js 中未被使用的 css，这样使用第三方的类库时，只加载被使用的类，大大减少 css 体积
• optimize-css-assets-webpack-plugin   压缩 css，优化 css 结构，利于网页加载和渲染
• webpack-parallel-uglify-plugin   能够并行运行 UglifyJS 插件，这能够有效减小构建时间

开发一个 plugin

• Webpack 在编译过程当中，会广播不少事件，例如 run、compile、done、fail 等等，能够查看官网；
• Webpack 的事件流机制应用了观察者模式，咱们编写的插件能够监听 Webpack 事件来触发对应的处理逻辑；
• 插件中可使用不少 Webpack 提供的 API，例如读取输出资源、代码块、模块及依赖等；

一、编写插件

在根目录下，新建目录 my-plugin 做为咱们编写插件的名称，执行 npm init -y 命令，新建一个模块化项目，而后新建 index.js 文件，相关源码以下：

class MyPlugin { 
constructor(doneCallback, failCallback) 
{ 
// 保存在建立插件实例时传入的回调函数 
this.doneCallback = doneCallback 
this.failCallback = failCallback 
} 
apply(compiler) 
{ 
// 成功完成一次完整的编译和输出流程时，会触发 done 事件 compiler.plugin('done', stats => 
{ this.doneCallback(stats) 
}) 
// 在编译和输出的流程中遇到异常时，会触发 failed 事件 compiler.plugin('failed', err => 
{ this.failCallback(err) 
  }) 
 }
}
module.exports = MyPlugin

二、注册模块

按照以上的方法，咱们在 my-plugin 目录底下使用 npm link 作到在不发布模块的状况下，将本地的一个正在开发的模块的源码连接到项目的 node_modules 目录下，让项目能够直接使用本地的 npm 模块。

npm link

而后在项目根目录执行如下命令，将注册到全局的本地 npm 模块连接到项目的 node_modules 下

$ npm link my-plugin

注册成功后，咱们能够在 node_modules 目录下能查找到对应的插件了。

三、配置插件

在 webpack.base.conf.js 加上以下配置

plugins: \[ new MyPlugin( stats => 
{ 
console.info('编译成功!') 
},
err => { 
console.error('编译失败!')
  }
 )
]

执行运行 or 编译命令，就能看到咱们的 plugin 起做用了。

好啦~ 以上就是我总结的webpack啦! 若是您以为能帮助到你记得动动你的小指点个👍哦~