前端模块化开发—webpack详细介绍

一、模块化开发

common.js规范

  1. 一个文件就是一个模块
  2. 每个模块都有单独的作用域
  3. 通过module.exports导出成员
  4. 通过require函数载入模块

commonJS是以同步模式加载模块

AMD(异步的模块定义规范)

Require.js

ES Modules

基本特性
  1. 自动采用严格模式
  2. 每个ESM模块都是单独的私有作用域
  3. ESM是通过CORS去请求外部JS模块的
  4. ESM的script标签会延迟执行脚本
导入和导出
 <!--加载模块不需要提取成员-->
import {} from './modules'
<!--提取模块的所有成员-->
import * as mod from './modules.js'
<!--动态导入模块-->
import ('./modules.js').then(modules=>{
    console.log(modules)
})
<!--同时导出默认成员和具名成员-->
import title, { name, age } from './modules.js'
直接导出导入成员

1、将多个模块统一在一个文件导出，在从统一入口进行引用
2、使用polifill解决浏览器不兼容ESmodules的问题(只适用于本地测试开发)

<!--在不支持ESModules的文件中使用该polifill文件-->
<script nomodule src="..."><script>
在node环境下使用ES Modules编写代码

1、将文件扩展名从js改为mjs

<!--index.mjs-->
import { foo, bar} from './modules.mjs'

2、使用node --experimental-module执行mjs文件

node --experimental-modules index.mjs

注意事项
1、系统内置成员可以通过ES module的提取成员方式导入，也可以默认导入

import fs from 'fs' 
import { writeFileSync } from 'fs'

2、第三方模块不支持直接提取成员，因为第三方模块都是默认导出

<!--不支持-->
import { _cameCase } from 'lodash'
<!--仅支持-->
import _ from 'lodash'
console.log(_comCase('ES Module'))
ES modulees 与Common JS模块交互
  1. 可以在ES Module中导入commonJS模块
<!--common.js文件-->
<!--Comonjs模块始终只会导出一个默认成员-->
modules.exports = {
    foo: 1111
}
====>
exports.foo = 111;

<!--ES Module.mjs文件-->
 <!--导入默认成员，不能直接提取成员，注意import不是解构出对象-->
import mod from './commonjs.js'  
console.log(mod) // { foo :111}

<!--不支持以下写法-->
import { foo } from './commonjs.js'

  1. CommonJs中不能导入ES Module模块

  2. CommonJs始终只会导出一个默认成员

  3. 注意import不是解构导出对象

  4. 在node的最新版本中，在package.json中添加type字段，就表示该工程默认使用ES Module编写代码，这意味着可以不用将js文件改为mjs，不过此时如果还需要使用commonJs，需要将CommonJS模块文件改为cjs后缀名

<!--package.json-->
{
    type: "module"
}
<!--运行-->
node --exprimental-modules index.js
node --exprimental-modules common.cjs

二、模块化打包工具

模块化打包工具的由来

  • 新特性代码编译
  • 模块化JavaScript打包
  • 执行不同类型的资源文件

模块化打包工具概要

打包工具解决的是前端整体的模块化，并不是单指JavaScript模块化

webpack

资源文件加载

样式文件加载

const path = require('path');
module.exports = {
    mode:'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

文件资源加载

const path = require('path');
module.exports = {
    mode:'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

常用加载器分类

  • 编译转换类，转换为JS代码，如css-loader
  • 文件操作类，将资源文件拷贝到输出目录，将文件访问路径向外导出，如：file-loader
  • 代码检查器，统一代码风格，提高代码质量，如：eslint-loader

webpack 处理ES2015

因为模块打包需要，所以webpack可以处理import和export，除此之外，并不能转换其他的ES6特性。如果想要处理ES6，需要安装转化ES6的编译型loader，最常用的就是babel-loader，babel-loader依赖于babel的核心模块，@babel/core和@babel/preset-env

{
   test: /.js$/,
   use: {
     loader: 'babel-loader',
     options: {
       presets: ['@babel/preset-env']
     }
   },
    exclude: /(node_modules)/, // 这个必须配置
 }

注意：Webpack只是打包工具，加载器可以用来编译转化代码

加载资源的方式

  • 遵循ES Modules标准的import声明

  • 遵循CommonJS标准的require函数。对于ES的默认导出，要通过require('./XXX').default的形式获取

  • 遵循AMD标准的define函数和require函数

  • Loader加载的非JavaScript也会触发资源加载

    css-loader在处理css代码时，遇到url函数，会将这个资源文件 交给url-loader处理

webpack的核心工作原理

核心工作原理：

  1. 根据配置找到打包入口文件
  2. 顺着入口文件代码里的 import 和 require之类的语句
    解析推断文件所依赖的资源模块
  3. 分别去解析每个资源模块对应的依赖，最后形成一颗依赖树
  4. 递归依赖树，找到每个节点对应的资源文件
  5. 根据配置文件 rules 属性，找到资源模块所对应的加载器，交给对应的加载器加载对应的资源模块
  6. 最后将加载以后的结果放入到bundle.js打包结果里
    实现整个项目的打包。

webpack Loader的工作原理

loader机制是webpack的核心特性之一。每个 Webpack 的 Loader 都需要导出一个函数，这个函数就是我们这个 Loader 对资源的处理过程，它的输入就是加载到的资源文件内容，输出就是我们加工后的结果。我们通过 source 参数接收输入，通过返回值输出。

对于返回的输出，有两种思路：

  • 直接在这个 Loader 的最后返回一段 JS 代码字符串

  • 再找一个合适的加载器，在后面接着处理我们这里得到的结果

Webpack 加载资源文件的过程类似于一个工作管道，你可以在这个过程中依次使用多个 Loader，但是最终这个管道结束过后的结果必须是一段标准的 JS 代码字符串。

// ./markdown-loader.js
const marked = require('marked')

module.exports = source => {
  const html = marked(source)
  // const code = `module.exports = ${JSON.stringify(html)}`
  const code = `export default ${JSON.stringify(html)}`
  return code 
}

插件机制

插件机制的是webpack的另一个核心特性，目的是为了增强webpack自动化方面的能力。

常见的插件介绍

CleanWebpackPlugin、HtmlWebpackPlugin、CopyWebpackPlugin

插件使用总结

webpack开发体验问题

自动进行编译：npx webpack --watch会监视文件的变化自动进行打包

自动打开浏览器: npx webpack-dev-server --open

source map

Source Map解决了源代码与运行代码不一致所产生的问题.Webpack 支持sourceMap 12种不同的方式，每种方式的效率和效果各不相同。效果最好的速度最慢，速度最快的效果最差.下面是几种常用方式介绍：

  • eval- 是否使用eval执行代码模块
  • cheap- Source map是否包含行信息
  • module-是否能够得到Loader处理之前的源代码
  • inline- SourceMap 不是物理文件，而是以URL形式嵌入到代码中
  • hidden- 看不到SourceMap文件，但确实是生成了该文件
  • nosources- 没有源代码，但是有行列信息。为了在生产模式下保护源代码不被暴露

开发模式推荐使用：eval-cheap-module-source-map，原因：

  • 代码每行不会太长，没有列也没问题
  • 代码经过Loader转换后的差异较大
  • 首次打包速度慢无所谓，重新打包相对较快

生产模式推荐使用：none，原因：

  • Source Map会暴露源代码
  • 调试是开发阶段的事情
  • 对代码实在没有信心可以使用nosources-source-map

devtool

201802100830451.png

webpack HRM

HMR(Hot Module Replacement) 模块热替换，应用运行过程中，实时替换某个模块，应用运行状态不受影响。

webpack-dev-server自动刷新导致的页面状态丢失。我们希望在页面不刷新的前提下，模块也可以即使更新。热替换只将修改的模块实时替换至应用中。

HMR是webpack中最强大的功能之一，极大程度的提高了开发者的工作效率。

HMR已经集成在了webpack-dev-server中，运行webpack-dev-server --hot，也可以通过配置文件开启.

Webpack中的HMR并不是对所有文件开箱即用，样式文件支持热更新，脚本文件需要手动处理模块热替换逻辑。而通过脚手架创建的项目内部都集成了HMR方案。

HMR注意事项：

  • 处理HMR的代码报错会导致自动刷新
  • 没启动HMR的情况下，HMR API报错
  • 代码中多了很多与业务无关的代码

生产环境优化

我们在生产环境中，更注重开发效率，而在生产环境中，更注重开发效率。

模式(mode)

webpack建议我们为不同的环境创建不同的配置，两种方案：

  • 配置文件根据环境不同导出不同配置
const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = (env, argv) => {
  const config = {
    mode: 'none',
    entry: './src/main.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist'),
      // publicPath: 'dist/'
    },
    module: {
      rules: [
        {
          test: /.md$/,
          use: ['html-loader', './markdown-loader.js']
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      // 用于生成index.html 
      new HtmlWebpackPlugin({
        title: 'Webpack Plugin Sample',
        meta: {
          viewport: 'width=device-width'
        },
        template: './src/index.html'
      }),
      // 用于生成about.html 
      new HtmlWebpackPlugin({
        filename: 'about.html'
      }),
      // 开发过程最好不要使用这个插件
      // new CopyWebpackPlugin({
      //   patterns: ['public']
      // }),
      // new MyPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './public',
      proxy: {
        '/api': {// 以/api开头的地址都会被代理到接口当中
          // http://localhost:8080/api/users -> https://api.github.com/api/users
          target: 'https://api.github.com',
          // http://localhost:8080/api/users -> https://api.github.com/users
          pathRewrite: {
            '^/api': ''
          },
          // 不能使用localhost:8080作为请求GitHub的主机名
          changeOrigin: true, // 以实际代理的主机名去请求
        }
      },
      // hot: true
      hotOnly: true, // 如果热替换代码报错了，则不刷新
    },
    devtool: 'eval-cheap-module-source-map'
  }
  
  if (env === 'production') {
    config.mode = 'production'
    config.devtool = false
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin({
        patterns: ['public']
      })
    ]
  }
  return config
}
  • 一个环境对应一个配置文件

Webpack.common.js

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: `bundle.js`
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: `index.html`
    })
  ]
}

Webpack.dev.js

const common = require('./webpack.common')
const merge = require('webpack-merge')

module.export = merge(common, {
  mode: 'development',
})

Webpack.prod.js

const common = require('./webpack.common')
const merge = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
        patterns: ['public']
    })
  ]
})

Package.json

  "scripts": {
    "server": "npx webpack serve --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  },

webpack的优化配置

  • definePlugin
    DefinePlugin 为代码注入全局成员，这个内置插件默认就会启动，往每个代码中注入一个全局变量process.env.NODE_ENV
const webpack = require('webpack')

plugins: [
    new HtmlWebpackPlugin({
      filename: `index.html`
    }),
    new webpack.DefinePlugin({
      API_BASE_URL: JSON.stringify('http://api.example.com')
    })
  ]`
  • Tree-Shaking 摇掉代码中未引用到的代码(dead-code),这个功能在生产模式下自动被开启。Tree-Shaking并不是webpack中的某一个配置选项，而是一组功能搭配使用后的效果。因为Tree-Shaking前提是ES Modules，由Webpack打包的代码必须使用ESM，为了转化ES中的新特性，会使用babel处理新特性，就有可能将ESM转化CommonJS，而我们使用的@babel/preset-env这个插件集合就会转化ESM为CommonJS，所以Tree-Shaking会不生效。但是在最新版babel-loader关闭了转换ESM的插件，所以使用babel-loader不会导致Tree-Shaking失效 
optimization: {
    usedExports: true,
    minimize: true
  }
  • 合并模块函数 concatenateModules, 又被成为Scope Hoisting，作用域提升
optimization: {
   usedExports: true,
   minimize: true,
   concatenateModules: true
 }
  • sideEffects 副作用，指的是模块执行时除了导出成员之外所做的事情，sideEffects一般用于npm包标记是否有副作用。如果没有副作用，则没有用到的模块则不会被打包。
optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: true,
    sideEffects: true
  }

在package.json里面增加一个属性sideEffects,值为false，表示没有副作用，没有用到的代码则不进行打包。确保你的代码真的没有副作用，否则在webpack打包时就会误删掉有副作用的代码，比如说在原型上添加方法，则是副作用代码；还有CSS代码也属于副作用代码。

代码分割

webpack的一个弊端：所有的代码都会被打包到一起，如果应用复杂，bundle会非常大。而并不是每个模块在启动时都是必要的，所以需要分包、按需加载。物极必反，资源太大了不行，太碎了也不行。太大了会影响加载速度；太碎了会导致请求次数过多，因为在目前主流的HTTP1.1有很多缺陷，如同域并行请求限制、每次请求都会有一定的延迟，请求的Header浪费带宽流量。所以模块打包时有必要的。

目前的webpack分包方式有两种：

  • 多入口打包：适用于多页应用程序，一个页面对应一个打包入口，公共部分单独抽取。
entry: {
  index: './src/index.js',
    album: './src/album.js'
},
output: {
    filename: '[name].bundle.js'
},
// 每个打包入口形成一个独立的chunk
plugins: [
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      title: 'Nulti Entry',
      template: './src/album.html',
      filename: 'album.html',
      chunks: ['album']
    })
  ],
// 不同的打包入口肯定会有公共模块，我们需要提取公共模块：
    optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
  • 动态导入：需要用到某个模块时，再加载这个模块，动态导入的模块会被自动分包。通过动态导入生成的文件只是一个序号，可以使用魔法注释指定分包产生bundle的名称。相同的chunk名会被打包到一起。
import(/* webpackChunkName: 'posts' */'./post/posts').then({default: posts}) => {
  mainElement.appendChild(posts())
}

MiniCssExtractPlugin可以提取CSS到单个文件

当css代码超过150kb左右才建议使用。

const MiniCssExtracPlugin = require('mini-css-extract-plugin')

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

OptimizeCssAssetsWebpackPlugin 压缩输出的CSS文件

webpack仅支持对js的压缩，其他文件的压缩需要使用插件。

可以使用 optimize-css-assets-webpack-plugin压缩CSS代码。放到minimizer中，在生产模式下就会自动压缩

optimization: {
  minimizer: [
    new TerseWebpackPlugin(), // 指定了minimizer说明要自定义压缩器，所以要把JS的压缩器指指明，否则无法压缩
    new OptimizeCssAssetWebpackPlugin()
  ]
}

输出文件名hash

生产模式下，文件名使用Hash

项目级别的hash

output: {
      filename: '[name]-[hash].bundle.js'
  },

chunk级别的hash

output: {
      filename: '[name]-[chunkhash].bundle.js'
  },

文件级别的hash，:8是指定hash长度 （推荐）

output: {
      filename: '[name]-[contenthash:8].bundle.js'
  },
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容