Webpack 模块打包详解与配置实践-CSDN博客

核心功能

解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个（有时会多个）js文件。

何为模块
在工程中引入npm包，或者提供一个工具方法的js文件，这些都可以称为模块。在设计时，按照特定的功能将其拆分成多个代码段，并对其进行独立的设计，开发和测试，这就是模块化思想。

Webpack优势

支持多种模块标准，包括AMD、CommonJS、ES6模块
有完备的代码分割解决方案。
可以处理各种类型资源，比如样式，模板，图片
有庞大的社区支持

安装

安装node.js，建议安装长期维护版。安装教程
安装webpack，此次采取本地安装方式安装。详细教程参考webpack官方文档。

# 创建一个webpack-demo文件夹
cd webpack-demo
# 初始化生成一个package.jason文件
npm init -y
# 本地安装webpack
npm install webpack webpack-cli --save-dev

打包应用

	webpack-demo
	|- package.json
   +|- index.html
   +|- /src
      +|- index.js
      +|- add-content.js

文件内容如下

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>My first Webpack app.</title>
  </head>
  <body>
    <script type="text/javascript" src="./dist/bundle.js"></script>
  </body>
</html>

index.js

import addContent from "./add-content";

document.write('My Webpack app.<br />');
addContent();

add-content.js

export default function() {
  document.write('I\'m using config file.');
}

配置webpack配置文件，webpack默认配置文件是webpack.config.js，在根目录下创建。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development'
};

配置package.jason

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

使用 npm run build 去打包。
使用 webpack-dev-server 去进行本地调试

安装 webpack-dev-server

npm install webpack-dev-server --save-dev

package.jason 添加 dev 脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
}

webpack.jason 添加 webpack-dev-server配置

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  mode: 'development',
  devServer: {
    port: '8080',
    client: {
      overlay: {
        errors: true,
        warnings: false
      }
    },
    static: {
      directory: path.resolve(__dirname, 'public')
    }  
  }
};

文件路径变成下面

	webpack-demo
	|- package.json
   +|- public
      +|- index.html
   +|- /src
      +|- index.js
      +|- add-content.js

在这里插入图片描述
因为如上特点，所以index.html静态文件要和bundle文件打包在一起。

使用 npm run dev 进行打包

webpack-dev-server 的主要工作就是接受浏览器的请求，然后讲资源返回。直接用 webpack 和 webpack-dev-server 有一个很大的区别，前者每次都会生成 budnle.js，后者只是将打包结果放在内存中，并不会写入实际的 budnle.js 中。

webpack-dev-server 还有一个更便捷的特性就是 live-reloading (自动刷新)。

模块化 CommonJS和ES6 Moudle区别

CommonJS

// calulator.js
module.exports = { name: 'calulator' };
// index.js
const name = require('./calulator.js').name;

对模块依赖的解决是动态的，模块依赖关系建立在代码运行阶段，require的模块路径可以动态指定，并且支持表达式。
导入模块时是导出值的拷贝

ES6 Module

// calulator.js
export const name = 'calulator';
// index.js
import { name } from './calulator.js';

对模块依赖的解决是静态的，模块依赖关系建立在代码编译阶段，导出语句是声明式的，不支持路径是表达式，并且导入导出必须位于模块的顶层作用域。
导出一个模块是导出值的动态映射。

entry chunk bundle 之间的关系

指定一个入口也就是entry，告诉 webpack从哪里开始打包，各个模块之间的依赖关系就像一颗依赖树，这些依赖模块会在打包时被封装成一个chunk。

chunk字面意思就是代码块，可以理解为被抽象和包装后的一些模块，就像一个装了很多文件的文件袋，里面的文件就是各个模块，根据不同的配置，一个工程打包时可能会产生一个或多个chunk。

chunk 得到的打包产物我们称为bundle

一般情况下entry与bundle一一对应，但是特殊情况下，一个入口也会产生多个chunk并最终生成多个bundle。

entry

应用程序打包的一个或者多个起点，默认的name 是 main

只有一个单一入口时，好处是只会产生一个JS文件，依赖关系清晰，弊端是，当应用规模上升到一定程度后会导致产生的资源体积过大，降低用户的页面渲染速度。

model

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

string = 'production': 'none' | 'development' | 'production'

output

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的bundle、asset 和其他你所打包或使用 webpack 载入的任何内容。

module

在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为模块。

每个模块都拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。

Node.js 从一开始就支持模块化编程。然而，web 的模块化正在缓慢支持中。在 web 界存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。 Webpack 从这些系统中汲取了经验和教训，并将模块的概念应用到项目的任何文件中

Webpack 天生支持如下模块类型：

ECMAScript 模块
CommonJS 模块
AMD 模块
Assets
WebAssembly 模块

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus
Elm

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

plugins

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

module.exports = {
  //...
  plugins: [
    new webpack.DefinePlugin({
      // Definitions...
    }),
  ],
};