前端工程化之3分钟讲清楚最经典的前端打包工具webpack基础

概念

Webpack 是一种前端资源构建工具，一个静态模块打包器。一个前端项目中包含了很多资源，但是浏览器并不一定全部认识，比如sass、less、ts，包括js里的高级语法。这些资源如果想在浏览器中正常工作，必须经过编译处理。而我们的Webpack就是可以集成的处理这些文件，并且汇总到一个文件中。

Webpack核心基础

entry

入口（entry）：代表着 Webpack 以那个文件为入口起点开始打包，分析构建内部依赖图。默认值是 ./src/index.js，但你也可以通过配置 entry 属性，来指定一个（或多个）不同的入口起点。

module.exports = {
  entry: './path/to/my/entry/file.js'
};

output

输出（output）: 指示 Webpack 打包后到资源 bundles 输出到哪里，以及如何命名。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loader

Loader：Webpack 自身只能理解 JavaScript 和 json 文件，loader 让 Webpack 能够处理其他文件。

const path = require('path');

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

plugin

插件（plugins）：可以用于执行范围更广的任务。从打包优化和压缩，一直到重新定义环境中的变量等。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

mode

模式（mode）:指示 Webpack使用相应模式的配置。默认为production。

module.exports = {
  mode: 'production'
};

实践一下

了解完核心基础后，现在可以尝试着去试一试完成一个Demo

首先先创建一个文件夹叫做 ” Webpack 初体验 “，然后在其下创建一个src文件夹，如图所示

image-20210807161923688.png

然后输入指令 npm init 进行项目初始化，并且安装 webpack 包

配置好环境就可以开始这个Demo了

首先我们在 src 目录下创建以下几个文件，为后面打包做好准备。

data.json文件

{
  "name": "Andy",
  "age": 18
}

Index.js 文件

/*
  index.js: webpack入口起点文件

  1.运行指令：
    开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是开发环境

    生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      整体打包环境，是生产环境
  */
import data from './data.json'
console.log(data)

function add(x, y) {
  return x + y;
}

console.log(add(1, 2))

然后输入打包指令，在这里加一点小内容，mode中分为开发环境和生产环境。他们最终打包的内容体积大小都是不一样的。最终我们能拿到built.js文件，如下图所示

image-20210807163933567.png

这就是打包后的文件内容

image-20210807163943370.png

Look LooK，这就是我们最终把js文件以及json打包后的样子，然后创建一个index.html文件，在index.html文件中引入

最终，就可以在浏览器中顺利的运行这个html文件

image-20210807164323397.png