Webpack:什么及为什么是 Webpack

为什么需要构建工具

  • 转换 ECMAScript 新版本的语法
  • 转换 JSX
  • CSS 前缀补齐、预处理器(Sass、Less)
  • 代码压缩混淆
  • 图片压缩

前端构建演变

ant + YUI Tool > Grunt > fis3、gulp > rollup、webpack、parcel

为什么选择 WebPack

  • 社区活跃度高、生态丰富
  • 配置灵活和插件化扩展
  • 官方更新迭代速度快

可以查看 npm 的周下载量进行对比

Webpack 入门

配置文件

默认配置文件:webpack.config.js,可通过 webpack --config 指定配置文件。

安装

首先需要 Node.js 及 NPM,如果还没有安装推荐查看《macOS 安装 Node.js 相关环境》

# 创建项目目录并进入
mkdir webpack-project
cd webpack-project
# 项目初始化
yarn init
# 安装 webpack 及 webpack-cli
yarn add -D webpack webpack-cli // -D 为 --dev,Yarn 中不需要 --save

安装完成后可以以检查 Webpack 版本的方式检测是否安装成功

webpack -v

但你可以会看到报错提示:「-bash: webpack: command not found」

这时候使用二进制文件运行

node_modules/.bin/webpack -v

当然这样有点繁琐,可以编辑项目中的文件 package.json

{
  "name": "webpack-project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  },
  "scripts": {
    "build": "webpack"
  }
}

加上一个 scriptsbuild,值为 webpack 其实也就是 node_modules/.bin/webpack

npm build -v
yarn build -v

然后使用 npm 或者 yarn 就可以了。

例子

首先在项目目录创建 Webpack 配置文件「webpack.config.js」

const path = require('path');

module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist') // 输出文件夹(当前项目目录下的 dist 文件夹)
    }
};

然后在项目目录创建名为 src 的文件夹并在起床创建两个 JS 文件

index.js:

import { helloworld } from './helloworld';

document.write(helloworld());

helloworld.js:

export function helloworld() {
    return `Hello world!`;
}

然后在项目目录运行

yarn build

返回:
Hash: 4a35a1f5fcb3d8635009
Version: webpack 4.35.0
Time: 358ms
Built at: 06/26/2019 7:00:04 PM
Asset Size Chunks Chunk Names
bundle.js 982 bytes 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.js + 1 modules 132 bytes {0} [built]
| ./src/index.js 73 bytes [built]
| ./src/helloworld.js 59 bytes [built]

就可以在项目目录看到生成了名为 dist 的文件夹已经其中名为 bundle.js 的打包好的文件。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注