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

概念

Webpack 是一种前端资源构建工具，一个静态模块打包器。一个前端项目中包含了不少资源，可是浏览器并不必定所有认识，好比sass、less、ts，包括js里的高级语法。这些资源若是想在浏览器中正常工做，必须通过编译处理。而咱们的Webpack就是能够集成的处理这些文件，而且汇总到一个文件中。html

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 文件夹中。webpack

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 可以处理其余文件。web

const path = require('path');

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

plugin

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

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。json

module.exports = {
  mode: 'production'
};
复制代码

实践一下

了解完核心基础后，如今能够尝试着去试一试完成一个Demo浏览器

首先先建立一个文件夹叫作 ” Webpack 初体验 “，而后在其下建立一个src文件夹，如图所示sass

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

配置好环境就能够开始这个Demo了less

首先咱们在 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文件，以下图所示

这就是打包后的文件内容

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="../build/built.js"></script>
</body>
</html>
复制代码

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