乐趣区

和我一起学习Webpack40一-初识Webpack

jiezi

一、Webpack 是什么？

Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.
这一段是官网的介绍，翻译过来就是 Webpack 是一个 模块打包工具。它可以打包 CommonJs/AMD 等浏览器不能直接支持的模块化标准。它可以让你把代码拆分成多个包，可实现按需加载。

二、环境搭建

1.node.js 和 npm

这个没什么多说的了，官网下载安装 node.js 即可，同时 npm 也会自动装好。

2.npm 初始化

npm init

初始化过程中会让你填许多信息，不想填的话直接在命令后面加上 - y 会自动生成 package.json 文件。

3. 安装 webpack

webpack 有两种安装方法，一个是全局安装，一个是本地安装。官方推荐本地安装，实际上本地安装是比较合理的，因为如果两个不同的项目用到的 webpack 版本不同的话，全局安装无法满足需求。

npm install webpack webpack-cli -D

webpack-cli 的作用是让我们可以在命令行中正确的使用 webpack 这个命令。

如果想查看本地项目的 webpack 版本：

npx webpack -v

npx 这个命令会帮我们在当前项目的 node_modules 目录下去找 webpack。

三、简单示例

首先我在 npm init 后的目录中创建 3 个文件：

  • index.html
  • index.js
  • module.js
// index.js

import a from './module'

console.log(a)
// module.js

const a = 123

export default a

在 index.html 引入 index.js，然后用浏览器打开，发现报错了。这是因为浏览器无法直接识别 ES6 module 的语法。

此时我们使用命令：

npx webpack index.js

会发现根目录下生成了一个 dist 文件夹，里面有一个 main.js 文件，在 index.html 引入这个 main.js 后再打开浏览器，发现控制台打印了 123。

这样我们就看到了 webpack 的作用，webpack 可以帮我们打包浏览器无法识别的模块化语法，让我们可以把代码分割成一个一个的包的形式。

四、配置文件简单介绍

在简单示例中我们没有配置任何东西 webpack 也打包成功了，这是因为 webpack 有默认的打包配置，当项目变得非常复杂的时候，我们需要许多配置项来帮助我们，默认的配置文件名为webpack.config.js，在根目录下创建：

const path = require('path');

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

这样配置以后使用 npx webpack 就可以让 webpack 按照自己期望的样子打包了。

如果配置文件名不想用 webpack.config.js，可以使用：

npx webpack --config 配置文件名

我们用 webpack 打包时一直有一个警告，是因为我们没有指定 mode，mode 可以选择 ’production’ 和 ’development’，默认为 ’production’，区别就是打包出来的文件是否压缩。

退出移动版