搭建 Webpack 项目步骤

前言

Node.js 就像是 Java 的虚拟机 + JDK，可以让 js 脱离浏览器沙盒，且提供模块机制、I/O 操作、数据库操作、网络操作等。Node.js 又提供了大量的库，NPM（类似于 Maven） 托管了超过 1,000,000 个开源包，Webpack 就是其中之一。

Webpack 是一个打包工具，打包我们项目下所有的模块，包括 .js、.jpg、.css、.sass 等模块（资源），是一个“压缩机”。这些模块和资源分散在“各地”，需要 Webpack 把它们有序地集结在一起。

起步

起草一个项目文件夹，在此文件夹内初始化 npm，并添加 index.html 和 index.js 两个文件，此时你的项目结构是：

yourapp
	public
		index.html
	src
        index.js
	package.json
	package-lock.json

安装

安装 webpack：npm install --save-dev webpack。

安装 webpack-cli：npm install --save-dev webpack-cli

安装 webpack-dev-server：npm install webpack-dev-server --save-dev。

配置

在根目录下创建webpack.config.js文件：

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
};

字段	描述
mode	production 指的是生产环境，最终项目运行要用生产环境来打包
entry	入口文件
output	输出文件，所有 js 模块都将被集中到这个输出文件

打包

我们在 src 目录下创建一个 .js 文件，写一个函数，试一试 webpack 的打包：

test01.js：

function hello() {
	console.log('hello webpack!');
}

接着，在入口函数中引入这个文件的函数并执行：

index.js：

import { hello } from "./src/test01";

hello();

在 package.json 文件中找到 scripts 字段，加上一个启动脚本："build": "webpack --config webpack.config.dev.js"。

打开打包后的 bundle.js 可以看到，我们写的函数最后变成了这样：