深入了解模块打包工具webpack-猿码集

1. 什么是webpack?

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。它会将所有 JavaScript，CSS，图片等资源打包在一起，通过代码分割、懒加载等策略优化资源加载。webpack是构建单页应用（SPA）的理想选择，也适用于多页应用的构建。

webpack的设计哲学是一切皆模块，一个模块可以是js，也可以是css、图片、字体等，还可以通过loader将scss、less转换为css，通过babel将jsx、ts转换为js等。

webpack支持开发阶段热替换(hot reload)、代码分割`code splitting`、懒加载`lazy loading`、压缩等功能，这使得webpack成为了当前最流行的JavaScript模块打包工具之一。

2. 为什么需要使用webpack?

2.1 模块化开发

在传统的前端开发中，常常将代码分散在各个HTML或JSP文件中，变量之间没有明显的区分，容易出现冲突污染问题，代码复用率低。而webpack天生对模块化更加友好，支持导入、导出模块等功能，使得我们不必再另外使用requireJS或ES6 Module等模块化方案。

2.2 代码优化

webpack的代码优化是其最重要的功能之一。在不同的应用场景下，采取不同的优化策略。比如，在开发阶段可以采用热替换的方式，通过webpack-dev-server启动一个本地服务器对代码进行调试和实时预览，改变一个文件不需要整个页面重新加载；在生产环境下，webpack会基于Tree Shaking的思想把未引用的代码清理掉，减少应用程序的体积。

2.3 加载不同类型的文件

webpack还可以处理CSS、SCSS、LESS、图片、字体等资源，这使得页面中的一切都成为了模块，而不是简单的HTML、CSS、JS。

3. webpack的基本术语

3.1 入口(entry)

入口是指webpack打包的应用程序的入口点。默认值为./src/index.js。一个应用程序可以有一个或多个入口点，对应不同的chunk。入口可以是JS、CSS、LESS、SCSS、TS等文件。


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

3.2 输出(output)

输出是打包后的文件存放的位置和名称。默认值为./dist/main.js。output 属性的配置和入口起点配置相似，只是多了一些filename时的处理，这部分会在下面讲解到。


module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

3.3 loader

webpack 只能处理 JavaScript 文件，并且支持 import 和 export 语句。但是大多数应用都会涉及到处理其他类型的文件，比如样式表、图片、字体等。这些文件可以通过 loader 转换成 webpack 能够处理的模块。loader 本身也需要通过 npm 安装，并且需要在 webpack.config.js 中的 modules.rules 字段中进行配置。


module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

3.4 plugin

Plugin 是一个扩展 webpack 功能的 JavaScript 对象。通过使用这些插件，可以搭配 webpack 完成很多其他前端技术所需要的构建步骤。插件可以完成很多功能，比如打包优化、资源管理和注入环境变量等，可以根据应用场景选择相应的插件。


const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

4. webpack的使用

4.1 安装webpack

我们可以通过npm安装webpack。同时，我们需要安装webpack-cli命令行工具，这样我们才可以使用webpack命令进行打包，而不是需要在package.json文件中维护一大串的scripts命令。

npm install webpack webpack-cli --save-dev

4.2 配置webpack.config.js

在项目的跟目录下创建webpack.config.js文件：


const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

上面的代码中，配置了入口（entry）和出口（output），此时可以使用webpack命令打包应用：

$ ./node_modules/.bin/webpack --config webpack.config.js

4.3 webpack-dev-server

webpack-dev-server是一个小型Express服务器，它使用webpack dev middleware来服务于webpack打包生成的文件，可以快捷方便的进行前端开发调试。

我们在webpack中配置一下devServer即可实现，通过running命令行的webpack-dev-server开启服务器：


const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

在本地开发环境下，可以直接使用下列命令进行启动：

$ ./node_modules/.bin/webpack-dev-server

5. 总结

webpack是一个强大的打包工具，它可以轻松处理JS、CSS、图片等文件之间的相互引用。webpack内置了许多插件，帮助开发者实现基于模块化的开发方式，并且通过 Tree Shaking 的算法减少了文件的体积，提高了应用程序的性能。通过loader和plugin的配置，webpack能够无缝地处理JS、CSS、图片等资源，并且轻松地完成代码优化、资源管理和注入环境变量等多项功能，使得webpack成为了当前最流行的JavaScript模块打包工具之一。

深入了解模块打包工具webpack