【Vue五分钟】 五分钟了解webpack的核心概念

📚 前言

📑博客主页：@丘比特惩罚陆

💖欢迎关注：点赞收藏⭐留言✒
💬系列专栏：web前端、嵌入式、笔记专栏
🎮 加入社区： 灌水乐园
🥇人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

👏 希望大家能小手一动，帮忙点个赞！

😁资源邮箱：2237814512@qq.com；微信：lss0901lili1130

---

目录

📚 前言

1、什么是loader

2.使用 loader 打包静态资源（图片篇）

3.使用loader打包静态资源

4.使用plugin让打包更加便捷 

5.entry与output的基本配置

6.sourceMap配置

7.使用 webpackDevServer 提升开发效率

​编辑

 8.Hot Module Replacement 热模块更新

 9.使用Babel处理ES6语法

---

1、什么是loader

   如果 webpack 不知道怎么打包某些模块（默认只知道打包 JS） 就需要我们在 module 中配置规则 rules 了，比如说图片；

module:{
   rules:[{
      test:/\.jpg$/,
      use: {
          loader: 'file-loader'
       }
}]
},

file-loader 会将图片挪到打包文件中且返回地址给 js，它可以 处理很多静态资源（excel、txt 什么的都行），反正统一是将 文件移到 dist 目录下且返回其地址。Loader 就是一个打包方案，解决 webpack 不知道怎么打包的 问题，test 就是处理哪些文件.

2.使用 loader 打包静态资源（图片篇）

 可以看到我们图片被打包成比较长的名字，如果想不改变名 字呢就去修改 options。

options: {
   name: '[name].[ext]'
}

  这个就是原本的名字加原本的后缀。类似这种修改就是 placeholder 占位符。 占位符很多，可以在官网查，可以随意搭配，包括 ext 后缀、 hash 哈希值等等

name:'[name]_[hash].[ext]'

如果想打包更多的文件可以继续配置（正则表达式）。

test:/\.(jpg|png|gif)$/,

如果想单独打包到其它路径可以配置 options 中 outputPath。

outputPath:'images/'

  还有更多参数，可以去官网找。 另一个类似的叫 url-loader，除了做 file-loader 的一切功能还 有其它功能。 它会把图片转换成 base64 然后直接放到 js 文件中，不会单 独创建一个图片文件。 好处是打包在 js 中，js 好了，图片也跟着加载出来了，少一 次网络请求。问题是打包的文件就更大了，比较耗时，空白 比较久。
  最佳使用方式是如果图片非常小可以 base64 省个请求，如果 相对大一点就打包到 dist 目录下，可以通过 limit 进行配置， 如果大于 limit 调 file-loader，小于就调 url-loader。

module:{
   rules:[{
      test:/\.jpg$/,
      use: {
          loader: 'file-loader',option:{name:'[name]_[hash].[ext]'},outputPaht:'image/',
limit:10240//10240就是我们的10kb
       }
}]
},

3.使用loader打包静态资源

   遇到 CSS，webpack 也不知道怎么打包，这就需要继续添加 loader 了。 由于 loader 比较多所以就用数组。

{
test:/\.css$/,
use:['style-loader','css-loader']
}

css-loader 可以帮助我们分析不同 css 文件的关系并且整合成 一个 CSS 内容。 style-loader 就是把 css 挂载到页面的 style 标签。 针对 sass 什么的需要安装对应的 sass-loader 和 node-sass 包。 Loader 执行顺序是从下到上，从右到左。 写 CSS3 代码一般会自动加前缀，打包完就没有了，需要 postcss-loader 来自动添加。 它还需要一个 postcss.config.js。

 

4.使用plugin让打包更加便捷 

   明确 webpack 打包完成后并没有 html 文件，需要自己手动 创建 index.html，比较麻烦，这里就用 htmlwebpackplugin 来 解决。 需要先安装对应 plugin 包，引入，配置完成还需要在数组中 实例化一下。
  

const HtmlWebpackPlugin = require('html-webpack-plugin')
 
plugin:[new HtmlWebpackPlugin()],

如此打包后即可在 dist 目录下自动生成一个 html（智能引入 对应 js）。如果需要自动生成的 html 中有某些标签可以进行配置，也就 是配置一个模板，这个我们在 src 写好一个 html（可以不注 入 js，打包完生成的 html 会自动注入），再丢路径给配置即可.

plugin:[new HtmlWebpackPlugin({
   template:'src/index.html'
})],

plugin 可以在 webpack 运行到某个时刻（比如打包完成时） 帮忙做一些事情。 如果希望打包的时候可以把之前的 dist 目录删除，可以借助 第三方的 cleanwebpackplugin（打包前会运行）.

const CleanWebpackPlugin = require('clean-webpack-plugin')

5.entry与output的基本配置

Entry 就是指定一个入口文件，可以指定打包后的 js 名字（默 认是 main.js），不过会被 output 输出的写死名字覆盖。 如果想打包两个文件呢，就不仅仅需要在入口指定两个文件， 输出也需要使用一下占位符（不然写死就共用一个文件名会 报错），这里占位符最终被替换为 main、sub，两个会放到 html 模板。

entry:{
  main:'./src/index.js',
  sub:'.src/index.js'
}
 
output:{
  filename:'[name].js',
  path:path.resolve(_dirname,'dist')
}

 如果希望打包完成注入的js前面有个CDN的前缀可以在输出 那配置 publicPath.

6.sourceMap配置

mode 为 development 是开发者模式，默认已经配置了 sourceMap，可以用 devtool 为 none 来关闭。 而关闭后我们如果代码有错误，点击查看是去看打包后的文 件而非源文件，这就不方便修改了，还是需要 sourceMap 提 供的映射关系，方便我们知道源文件哪里有问题，通过 source-map 重新开启。

devtool:'inline-source-map',

默认错误会提示具体到第几行第几列，而加上 cheap 就只是 精确到第几行，打包会快一些。同时默认只是会映射业务代 码，不管第三方模块的代码，除非加上 module。 eval 是最快的，既没有 map 也没有 base64，直接以 eval 方 式运行代码，但是如果代码太大就不太合适。 开发环境代码最佳实践是：

devtool:'cheap-module-eval-source-map',

线上代码：

devtool:'cheap-module-source-map',

7.使用 webpackDevServer 提升开发效率

  每次我们更改代码都需要手动打包然后打开打包后的 html 重新编译运行，效率比较低，想要实现一个自动打包，有三 种方式。 第一种是直接加 watch，webpack 就会自动监听，一旦源代 码改变了就自动重新打包。

  这个还不够好，我还希望能自动打开浏览器，实现一些服务 器的内容（也就是不再 file 打开而是 localhostxxxx）。 第二种是 webpack devServer 起一个 web 服务器（不然都是 在 file...，无法发 ajax 请求），这个在配置文件已经内置了， contentBase 就是服务器起在哪即根路径

好处在于还可以自动帮我们刷新浏览器。 还可以配置一个 open：true 的属性，可以自动打开一个浏览 器，自动访问服务器地址（8080），允许发 ajax 请求（vue 和 react 底层都是利用这个自动开启一个服务器）。
 

deyServer: {
   contentBase:'./dist',
   open:true
}

 同理我们也可以配置一个 proxy 跨域代理（其它框架也是利 用这个）。

port 可以指定一个端口号。 第三种（如果想自己写个服务器）是在 node 中直接使用 webpack，也就是通过 webpack 方法，还需要用到 webpack 的编译器（执行一下编译器就是重新打包一手）.

 这个还需要手动刷新，自动刷新还需要写很多内容，比较浪 费精力，直接 devServer 就好了，不要自己写，这里自动监 听代码变化是依靠 webpackdevmiddleware，publicpath 可以 不写，这里并没有什么影响.

 8.Hot Module Replacement 热模块更新

Webpack-dev-server 不会生成 dist 目录而是保存到内存中， 提高了打包速度。 我们执行了一些操作然后修改了代码，结果页面就会刷新导 致操作全部消失，要重新操作比较麻烦，比如需要实现代码 改动后样式变其余不变，这就需要 HMR。 需要在 devServer 开启一个 hot：true（启动热加载模块）和 hotOnly：true（即便是 HMR 没有生效也不要让浏览器自动 刷新）。 还需要引入 webpack，用来加载自带插件，最好重启一下让 配置文件生效.

devServer: {
contentBase: ' . /dist' ,
open: true ,
port: 8080,
hot: true,
hotonly: true
},

const webpack = require( 'webpack' )|
plugins: [
new HtmLWebpackPlugin({
template: ' src/ index. htmL'
})，
new
C LeanwebpackPlugin( ['dist']) ,
new webpack . HotModu LeRep LacementPlugin()|
],

如此就可以实现 CSS 文件修改，不会影响 JS 文件已经渲染出 来的内容。

同样的，HMR 也可以实现多个 JS 文件，其中一个文件改动， 不影响其它文件，当然了需要通过 accept 方法监控可能需要 变化的文件，然后根据文件变化与否是否需要执行什么逻辑

if (module. hot) {
module. hot.accept( ' . /numben', () => {
number();
})
}

这个在开启了 HMR 时，就是只要 number 文件发生改变就执 行一下 number 函数。 CSS 不需要这么写是因为内置好了相应的 HMR 的代码（本质 上都是要写的，没写是因为已经写好了）。
 

 9.使用Babel处理ES6语法

打包后依然是 ES6 语法什么的在 chrome 倒是没问题，其它 浏览器可能就有问题，最好还是打包成 ES5. 具体步骤可以看看 Babel。

test: /\.js$/ ,
exc lude: /node_ modules/ ,
Loader: "'babel- Loader"

使用了 babel-loader 其实只是打通了 webpack 与 loader 的桥 梁，还不会有作用，可以整个 babel/preset-env，丢在 options 就行。

虽然是作了翻译，但是那些 ES5 没有实现的也没办法转换， 比如 Promise、map 什么的。这就需要 babel-profill 做一个实 现的补充。 安装然后在 JS 文件的最顶部引入即可.

注意这样子会将全部低版本浏览器没有实现的语法都导进 来，一定程度上也增大了包的体积，如果只是需要部分方法， 可以配置一下 preset-env 参数 useBuiltIns：‘usage’，用到什 么加载什么方法。

presets: [ [ ' @babel/preset-env', {
useBui ltIns:
'usage'
}]]

当然了 preset 也可以配置其它参数。

rules:[{
test: /\.js$/ ，
exclude: /node_ modules/ ,
loader: ' babe l-loader '
options: { 
presets: [[ '@babe l/preset-env' ,
targets: {
chrome: "67"
}，
useBuiltIns: ' usage '
}]]
}

比如 targets 就参考浏览器版本是否需要转换 ES6，支持比较 好就不需要了。 当然了目前这种是全局变量注入的形式，如果是做类库的就 需要整个↓避免污染，这种是以闭包/间接引入的形式。
 

options: { 
// presets: [[ @babel/ preset-env', {
//
targets: {
//
chrome: "67" ,
//
},
// useBuiltIns: ' usage
// }]]
"plugins": [ ["@babe l/p Lugin-transform- runtime", {
corejs": ?,
"helpers": true,
regene rator": t rue,
"useESModules": false
}]]
}

如果需要配置的 options 太多就整个 babelrc，并没有问题。