Webpack快速入门

博客：姜瑞涛的官方网站
原文链接：https://www.jiangruitao.com/webpack/quick-start/
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议

本篇我们配置最简单的Webpack前端工程，来快速入门Webpack整个打包流程。

一、Webpack的安装与命令行打包

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack1-1例子

Webpack依赖Node.js，没有安装的话，去官网下载安装LTS稳定版本的Node.js。

在本地新建一个文件夹webpack1-1，在该文件夹下执行命令行

  npm init -y

该命令会初始化一个npm项目并使用默认参数创建package.json文件。

  npm install --save-dev webpack@4.43.0    webpack-cli@3.3.12    

该命令安装了指定版本的webpack与webpack-cli。这两个npm包作用如下，webpack是webpack核心包，webpack-cli是命令行工具包，在用命令行执行webpack的时候需要安装。详细的安装过程会在Webpack安装一节进行讲解，请尽量安装与教程版本一致的包。

我们代码逻辑很简单，在一个JS文件里定义一个字符串，然后在另外一个JS文件引入该文件并把字符串内容输出在浏览器控制台里。

项目下的主要文件如下：

|--a.js
|--b.js
|--index.html
|--package.json

a.js内容

  // ES6的模块化语法
  import { name } from './b.js';  
  console.log(name);

b.js内容

  // ES6的模块化语法
  export var name = 'Jack';

HTML文件更简单，只是用来引入JS文件。

如果我们直接在本地HTML文件里引入a.js，浏览器会报错，一方面是浏览器对原始的ES6模块默认引入方式不支持而报错，另一方面即使使用支持的方式引入也会因本地JS引入的安全问题而报错。

所以，我们可以通过Webpack把这两个文件打包成一个JS文件来解决这个问题。Webpack打包后，代码里就没有这种模块化语法了。

我们执行命令

  npx webpack a.js -o bundle.js   

上面命令的作用：从a.js文件开始，按照模块引入的顺序把所有代码打包到bundle.js文件里。Webpack会自动处理打包后代码的顺序与依赖关系。-o是out的意思，表示输出。注意，webpack是打包命令，后面的是打包参数。

现在我们在HTML文件里引入bundle.js，打开浏览器控制台，正常输出字符串'Jack'。（如果你觉得HTML还是会从a.js和b.js读取内容，你可以把这两个文件删除试一下，你会发现这两个文件已经没有作用了。）

上面就是一个最简单的Webpack打包过程。打包后的bundle.js代码目前是压缩后的，后面会讲解怎样不压缩打包后的代码。

我们在执行上面命令的时候，命令行控制台会出现警告信息，告诉我们没有设置'mode'项，Webpack将会使用默认的'production'。我们可以在上面的命令后面配上'mode'项，但当命令参数过长的时候，使用起来就会不方便。此时，我们可以选择使用Webpack的配置文件。

二、Webpack的配置文件

Webpack默认的配置文件是项目根目录下的webpack.config.js，在我们执行下方命令的时候，

  npx webpack  

Webpack会自动寻找该文件并使用其配置信息进行打包。

现在我们在文件夹下新建webpack.config.js文件，里面的代码如下

  var path = require('path');  

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

配套代码是github仓库 https://github.com/jruit/webpack-tutorial 的webpack1-2例子

命令行执行npx webpack后，Webpack就开始打包了。配置文件里的代码解释：

因为Webpack是基于Node.js执行的，所以可以使用Node的功能。path是Node.js里的路径解析模块，你可以将其看成是一个JS普通对象，该对象有一些方法可以供我们使用。我们现在使用了其resolve方法，该方法的作用是将方法参数解析成一个绝对路径返回。__dirname是Node.js的一个全局变量，表示当前文件的路径。这样，path.resolve(__dirname, '')表示的其实就是当前文件夹根目录的绝对路径。

module.exports是CommonJS模块导出语法，导出的是一个对象，该对象的属性就是Webpack打包要使用的参数。entry是Webpack构建的入口文件，我们的入口文件是a.js。output是打包后资源输出文件，其中path表示输出的路径，filename表示输出的文件名，现在我们把打包后的文件输出在当前目录的bundle.js。

mode是Webpack的打包模式，默认是'production'，表示给生产环境打包的。现在我们设置成'none'，这样代码就不会压缩了。

现在，我们就学会了Webpack命令行参数打包与配置文件打包两种打包方法。在我们实际项目中，我们都是使用配置文件打包的。简单的项目我们使用默认的webpack.config.js文件，复杂的项目可能会区分开发环境、测试环境与线上环境分别使用不同的配置文件，这些后续章节再讲。

三、小结

1.这节课我们主要学习了Webpack最简单的打包方式，希望通过本节课可以对Webpack打包有一个初步的认识。后续章节，我们将学习预处理器loader和插件等相关知识。

注

1.如果安装npm包慢的话，通过以下命令设置npm镜像源为淘宝npm后再安装

  npm config set registry https://registry.npm.taobao.org

2.npx webpack a.js -o bundle.js命令里npx是新版Node里附带的命令。它运行的时候默认会找到node_modules/.bin/下的路径执行。分别与下面的命令等效。

linux/unix命令行：

  node_modules/.bin/webpack a.js -o bundle.js

windows的cmd命令行(webpack1-1在D:\jiangruitao\路径下):

  D:\jiangruitao\webpack1-1\node_modules\.bin\webpack a.js -o bundle.js 

3.要真正掌握path.resolve的解析规则需要一些时间来练习，但这份Webpack教程只会用于解析简单的资源出口路径，也就是把两个路径参数用字符串连接起来就行了。如果你不想深入Node项目开发，暂时没必须要去研究path.resolve。