webpack5 笔记一，集合 js 文件

目前在我看来，web 前端，应该可以看作就是 HTML、CSS、JS 的集合。😂

webpack 就是一个脚手架，方便我们开发，并且提供更多有趣强大的功能。

动手

创建文件夹，下载依赖

shell

mkdir webpack-demo
cd webpack-demo
npm init -y
# webpack 是核心包。webpack-cli 用于在命令行中执行 webpack。
# 虽然我不知道 `在命令行中执行 webpack` 到底是个啥意思
# 但终归要使用到这两个包
npm install webpack webpack-cli --save-dev

创建 index.js 文件。

在这里使用到了 import/export 语法。

虽然大多数浏览器不支持 import/export 语法，但是在 webpack 中你不需要担心这点，因为它会帮你作转译，以此让浏览器能够识别。

除了上面所说的 webpack 会自动处理 import/export 语法，其它一些事情 webpack 就不会帮你做了。比如在 js 文件中使用 ES6 新语法，新特性。

但你可以使用 webpack loader，处理在 js 文件使用到的 ES6 特性。

import _ from 'lodash';

function component() {
  const el = document.createElement('h1')
  el.innerHTML = _.join(['Hello', 'World'])
  return el
}
document.body.appendChild(component())

创建 webpack.config.js 文件

const path = require('path');

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

目录结构如下：

webpack-demo
|- /dist
	|- index.html
|- /node_modules
|- /src
	|- index.js
|- package-lock.json
|- package.json
|- webpack.config.js

再在 package.json 文件中添加一个脚本，然后执行

json

  "scripts": {
    "build": "webpack"
  }

效果如下：

webpack5 笔记一，集合 js 文件 ​

动手 ​

webpack5 笔记一，集合 js 文件

动手