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。

上一篇:安卓笔记Activity的生命周期数据跳转


下一篇:Java中@Override的作用