webpack基本用法及原理（10000+）

1 webpack是什么

所有工具的出现，都是为了解决特定的问题，那么前端熟悉的webpack是为了解决什么问题呢？

1.1 为什么会出现webpack

js模块化：
浏览器认识的语言是HTML，CSS，Javascript，而其中css和javascript是通过html的标签link,script引入进来。

随着前端项目的越来越复杂，css和js文件会越来越庞大，那么在开发阶段，就必须要把css和js按功能拆分成几个小文件，方便开发。

那么拆分的小文件如何引入到html中呢？css可以通过link标签或者@importcss语法，但是js因为没有模块导入的语法（ES6有了import，但还不是所有浏览器兼容），就只能通过script标签引入。但是这样的话会导致很多问题：

  1. http请求大量增多，影响页面呈现速度。
  2. 全局变量混乱，难以维护。

针对js模块化出现了很多的解决方案，总结来说有几种规范：

  1. CommonJs，语法为：require(), module.exports（同步加载，适用于node服务器环境）
  2. ES6 Mode,语法为：import,export（异步加载，适用于浏览器环境)
  3. AMD,语法为：require(),define()（异步加载，适用于浏览器环境）

工程化：
除了js模块化的问题之外，前端还有很多其他的问题，比如代码混淆，代码压缩，scss，less等css预编译语言的编译，typescript的编译，eslint检验代码规范，如果这些任务都需要手工去执行的话，太繁琐，也容易出错。

1.2 webpack能做什么

  1. 模块化
    其实webpack的核心就是解决js模块化问题的工具，运行在node环境中，同时可以支持commonjs，es6，amd的模块语法（可以使用：reuire/mocule.exports,import/export,require/define的方式来导入导出模块）。

    可以将开发时候拆分为不同文件的js代码，打包成一个js文件。也可以通过配置灵活的拆分js代码，通过 tree shaking 删减没有使用到的代码。

    模块化打包时webpack的核心功能，但是它还有两个非常重要的机制loader和plugin。

  2. loader
    webpack本身只支持js,json文件的模块化打包，但是有开放出loader接口，通过不同的loader可以将其他格式的文件转化为可识别的模块，比如：
    css-loader可以识别css文件，raw-loader可以直接将文件当作模块，less-loader，sass-loader可以直接识别less，sass文件。

  3. plugin
    插件机制是webpack的另一个重要的拓展，webpack在打包的过程中，会暴露出不同的生命周期事件，而插件会监听这些事件，然后做出对应的操作，比如：
    UglifyJsPlugin可以混淆压缩代码，EslintWebpackPlugin可以执行eslint的代码格式检测和自动修复。

总结：
webpack是一个运行在node环境下，对js文件进行模块化打包的工具。通过loader机制可以实现除js格式外的其他格式文件，通过plugin机制可以实现自动执行一些工程化需要的任务。

2 webpack怎么用

那么webpack要怎么使用呢？

2.1 安装运行

首先要安装webapck，使用npm（npm基本用法及原理），安装webpack（核心），webpack-cli（命令行工具）:

npm install webpack webpack-cli

然后创建以下两个文件：name.js，index.js，
我们以es6的语法导入导出模块，es6模式的模块变量的导出时按引用导出，就是在模块的变量如果在外部被修改，也会作用到模块内部，而commonjs的模式是按值导出，即模块外部的修改，不会影响到模块内部。

//name.js
let name = "小明"
function say(){
    console.log('my name is ',name)
}
export  {
    name,
    say
}

//index.js
import { name,say } from "./name.js";

name = "小红"
say()
console.log('he name is ',name)

然后运行打包命令：

//用npx直接运行webpack命令
npx webpack 

//或者用npm的脚本运行打包
//package.json
{
	script:{
		pack:'webpack'
	}
}
npm run pack

webpack默认从index.js文件开始打包，所以如果开始文件的名称为index，就可以不需要写配置文件，就可以直接打包。
默认打包的模式是‘production'即生产模式，打包成功后，会自动创建dist文件夹，并生成main.js文件：

//main.js
(()=>{"use strict";let e="小明";e="小红",console.log("my name is ","小红"),console.log("he name is ","小红")})();

我们看到打包后的文件把index.js和name.js两个文件合成了一个文件，并对代码进行了混淆压缩（生产模式），这是最基本的webpack最核心的功能 6— 打包。
但是显然，在实际工作中我们不会这么简单的使用，那就需要用的配置文件了，下面是一个比较接近实际工作中的例子。

2.2 配置文件 webpack-config.js

以下的项目会有几个文件：index.js , utils.js, style.scss, index.html, webpack-config.js。
基本功能就是在index.js文件中引入utils.js文件里的方法并调用。然后用scss语法编写样式，最后把打包的文件加入到已有的index.html文件中。
通过命令：npx webpack serve(可以放入npm脚本配置中，然后运行 npm run xxx)，实现的效果是：

  • scss自动编译
  • index.js utils.js style.scss 文件打包成一个文件
  • 把打包的文件自动添加到index.html中
  • 打包完成后，自动打开默认浏览器，查看页面
  • 文件有变更的话，会自动重新打包，刷新页面
//utils.js
export function sayHello(){
    console.log('hello world')
}

//index.js
import './styles.scss'
import { sayHello } from "./utils";
sayHello()

/*styles.scss*/
$bg : black;
$fontC:rgb(218, 17, 117);
body{
    background:$bg; 
    h3{
        color:$fontC;
    }
}

<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
      <h3>hello webpack</h3>
  </body>
</html>

//webpack-config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist文件夹
  },

  // 本地服务器
  devServer:{
    port:8888,//端口
    open:true,//自动打开浏览器
    hot:true,//启动热更新
  },

  // loader
  module:{
    // 处理scss文件
    rules:[
      {
        test:/\.s[ac]ss$/i,
        use:[
          'style-loader',//将js模块生成style标签节点
          'css-loader',//将css转化成js模块
          'sass-loader'//将scss文件编译成css文件
        ]
      }
    ]
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
};

webpack的打包是在node环境下执行的，所以node的语法这里都可以用，最终输出的是一个js对象。
配置可以分成几个部分（参考webpack配置文档）：

  • 打包模式

    • mode 预置了开发环境和生产环境的一些优化。
      在这里插入图片描述

    • devtool 控制是否生成，以及如何生成 source map。有了source map文件的话，如果代码有报错可以映射到打包之前的代码（源代码），可以方便定位错误。
      可以有很多的选择，一般来说，在开发环境下选择：eval-cheap-module-source-map，cheap-source-map。生产环境选择：不配置，source-map。

  • 入口、出口

    • entry 入口文件，webpack会从这个文件开始查找依赖的包，可以配置多个
    • output 出口文件，webpack会根据这里的配置，输出打包后的文件。

  • 本地服务器
    此功能需要安装webpack-dev-server插件npm install --save-dev webpack-dev-server,启动时需要用serve命令npx webpack serve.
    启动成功后，会在本地开启一个web服务器，并且有实时更新，热模块替换等功能。
    配置项是在devServer中。

  • loader
    webpack本是只支持对js文件的打包，但是因为有loader机制，可以通过配置rules实现对其他文件的打包。
    示例代码中实现的是对scss/sass文件的打包，同一个relues中的loader的执行顺序是从右到左（逆序），所以顺序不能乱。第一个执行的loader 会将其结果（被转换后的资源）传递给下一个 要执行的loader。

  • 插件plugins
    webpack在打包的时候，会暴露其生命周期，插件就是在特定的生命周期执行的操作，通过插件的机制，可以实现很多强大的功能。
    示例代码中使用了HtmlWebpackPlugin插件，功能是在打包完成后，自动把打包后的代码加入到html文件中。如果没有任何配置，则会自动生成一个html文件，并通过<script>标签把js文件引入进来。

3 实践中的优化

3.1 配置文件拆分与合并--merge

在实际项目中，开发环境和生产环境的配置往往会有很大的区别，所以会有两个配置文件，而这两个配置文件又会有一些公共的配置，所以就会有如下三个配置文件：

  • webpack.dev.js
  • webpack.prod.js
  • webpack.common.js
    那么这些配置文件是如何结合的呢?这就要用到webpack-merge插件了。
// webpack.common.js

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

module.exports = {
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist文件夹
  },
  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
};

//webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  // 本地服务器
  devServer:{
    port:8888,//端口
    open:true,//自动打开浏览器
    hot:true,//启动热更新
  },
});

//webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool:'source-map'
});

// package.json
{
	...
  "scripts": {
    "dev": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
  },
	...
}

然后分别执行npm run dev,npm run build就可以了。

3.2 代码分离

webpack会把所有代码打包成一个文件（包括业务代码，npm包），这样最后的包就会很大，打包效率也很慢，所以可以有时候需要做代码分离。

  • 第三方库分离
    有一些第三方库可能会需要独立引入，而不是放在业务代码里面，因为不会改动或者需要cdn服务，比如jquery有免费的cdn服务：https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js 。
    那这些独立引入的js文件就不需要加入到webpack打包，只需要在externals添加配置就行。

    // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',//contenthash 是文件内容的hash值
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist文件夹
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
};

    这样的话，虽然index.js里有引入jquery，webpack也不会把jquery打包进来，打包时间会减少，包的体积也会变小。

  • npm包分离
    第三方库除了一些可以用script标签引入的，大多数是通过npm引入的，这一类的js包也会也会合并到最后的app.js总包之中，使得app.js文件会过大，而且如果业务代码有一点改动的话，app.js的包就会全部都变动，导致浏览器就会重新下载app.js文件，使用不了浏览器内置的缓存机制。
    我们可以通过配置，让npm里的包与业务代码分开。

    // index.js

import _ from 'lodash'
import $ from 'jquery'
import { sayHello } from "./utils"

$('#title').text('hello jquery')

    // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 打包模式
  mode:'development', //development,production,none
  devtool:'cheap-source-map', // eval-source-map,source-map,cheap-source-map
  // 入口配置
  entry: {
    app: './src/index.js',
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js', //contenthash是文件内容的hash值
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清除dist文件夹
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
  optimization: {
    runtimeChunk: 'single',// 把webpack引导文件独立出来
    splitChunks: {
      cacheGroups: {
        vendor: {
        //所有node_modules下的包合并成一个，并独立出来
          test: /[\\/]node_modules[\\/]/, 
          //控制哪种导入方式的js包才分离出来， 'all'-全部的js包,'async'-异步导入的js包,'initial'-初始导入的js包
          chunks: 'all',
          name:'vendor' //独立后的包的名称
        }
      }
    }
  },
};

    这样打包目录下就有三个文件：

    • app.js： 业务代码
    • runtime.js：webpack的引导代码
    • vendor.js: npm引入的js包代码

    一般有变动的就只有app.js文件了。npm引入的js包是否可以再分成几个文件呢？可以的，参看 SplitChunksPlugin文档

  • 业务代码分离
    有时候不仅第三方库需要分离，我们自己写的业务代码可能也会很大，也需要分离。要实现业务代码的分离只要添加多个入口就可以了。

    // index.js
import { sayHello } from "./utils"

sayHello()
console.log('hello index')

    // utils.js
export function sayHello(){
    console.log('hello utils')
}

    // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode: 'development',
 devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
      dependOn:'utils'
    },
    utils:'./src/utils.js'
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist文件夹
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
};

    这样utils.js文件也从主包app.js中分离了出来，要注意的是app入口加了dependOn:'utils',为了让app.js里面不要重复打包utils.js。

  • 动态加载
    有时候不是需要页面一开始的时候，就加载全部的js包，而是等到特定的时机再去加载某些js包，这就需要动态加载了，只需要用到import()就可以了，注意这是import的函数使用方式。

    // index.js

  const element = document.createElement('div');
  element.id = 'title'
  element.innerHTML ='Hello webpack';

  const button = document.createElement('button');
  button.innerHTML = 'Click me';
  button.onclick = importJquery;


  document.body.appendChild( element);
  document.body.appendChild( button);

  async function importJquery(){
	    const { default: $ } = await import('jquery');
	    $('#title').text('hello jquery')
	}

    // webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode: 'development',
 devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
    },
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist文件夹
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
  ],
};

    如果运行代码的话，会发现页面一开始进入的时候，并没有引入jquery的包，但是点击按钮的时候，就开始导入了，这就动态加载。
    并且发现webpack.config.js并没有做什么特殊的配置，这是因为动态导入的js包webpack会自动给独立为一个js文件。
    import()返回的是一个promise对象。

3.3 动态链接库 dll

webpack每次打包的时候，都会把涉及到的js包都处理一遍。但是实际上有些js包是不会有改动到的，所以打包过后的文件每次都是一样的，每次都重新打包的话，会加增打包时间。
有一种解决方案是：把不会变动的js包先打包一次，以后每次打包的时候，直接引用就可以了。
先添加一个独立的配置文件 webpack.dll.config.js

//webpack.dll.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  // 入口文件
  entry: {
    // 项目中用到该两个依赖库文件
    jquery_lodash: ['jquery','lodash'],
  },
  // 输出文件
  output: {
    // 文件名称
    filename: '[name].dll.js', 
    // 将输出的文件放到dll目录下
    path: path.resolve(__dirname, 'dll'),
	
	// 文件输出的全局变量
    library: '_dll_[name]',
  },
  plugins: [
    // 使用插件 DllPlugin
    new webpack.DllPlugin({
        // 动态链接库的全局变量名称，需要和 output.library 中保持一致
        // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
        name: '_dll_[name]',
        // 描述动态链接库的 manifest.json 文件输出时的文件名称
        path: path.join(__dirname, 'dll', '[name].manifest.json')
      }),
  ]
};

执行打包脚本 npx webpack --config webpack.dll.config.js,就会再dll目录下输出文件：jquery_lodash.dll.js,jquery_lodash.manifest.json。
主要用到的插件是：

  • DllPlugin 的作用就是生成manifest.json文件。

然后配置项目打包用的webpack.config.js文件：

//webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');


module.exports = {
  mode: 'development',
  devtool: 'cheap-source-map',
  // 入口配置
  entry: {
    app: {
      import:'./src/index.js',
    },
  },
  // 出口配置
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,//每次打包，清楚dist文件夹
  },

  // 插件
  plugins: [
    // 自动把打包后的文件加入到html文件
    new HtmlWebpackPlugin({
      // 生成html文件的模板
      template: './index.html'
    }),
    // 引用dll中的文件,
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dll/jquery_lodash_dll.manifest.json')
    }),
    //把dll文件加入到index.html中
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, './dll/jquery_lodash_dll.dll.js'),
      publicPath: './',
    }),
  ],
};

主要用到的插件是:

  • DllReferencePlugin 检索引用文件的时候，如果发现manifest.json里面有，就告诉webpack不要打包该文件，因为已经打包好了。
  • AddAssetHtmlWebpackPlugin 因为webpack没有打包dll里的文件，所以需要手动把它加入到index.html中。

然后就可以正常的打包项目了：

// index.js
 import _ from 'lodash'
 import $ from 'jquery'

$('#title').text('hello jquery')

执行打包脚本 npx webpack，会自动使用webpack.config.js配置文件打包。会发现打包速度提高了很多。

posted @ 2021-09-30 22:30  木子草明  阅读(464)  评论(1)  编辑  收藏  举报