从基础到实战 手把手带你掌握新版webpack4

WangJiaYuan
226 阅读8分钟

前言：

随着前端工程越来越复杂，单独建几个文件来写业务代码，这样的方式已经无法保证项目的可维护性了。所以我们就想把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块自己做自己的事情，这样就可以保证项目的维护性和可扩展性了。但如果我们有几千个模块，那我们能在页面上去引入几千个js文件吗？所以当项目大到这个程度的时候，我们就得借助工具来管理我们的这些模块了。webpack就是这样的一种工具。帮助我们管理复杂项目的一个工具。与webpack相似的还有GRUNT Gulp browserify,但是这两年 webpack的使用率直线上升。 比如说 vue react Angular 三大框架的脚手架工具都开始使用webpack来做底层代码的构建，这得益于webpack可以提供其他工具无法实现的一些特性，比如Tree shaking 懒加载 代码分割 。现在来看 用webpack做代码管理的工具已经是越来越多前端开发者的共识了。

webpack4与之前版本比较

  • 速度更快，大型项目节约时间90%构建时间
  • 内置了更多默认配置，变更了许多API

webpack究竟是什么？

通过视频一我们简单了解到webpack，好像是一个js的翻译器。 但是它只识别“import”这样的语句，遇到其他一些js的高级语法，它一概不认。所以把它叫做js的翻译器 实际上是高看了它。

 webpack is a module bundler.

webpack实际是一个模块打包工具----

什么是模块打包工具？

顾名思义，就是用来分辨模块的依赖关系，组织模块代码的工具。对于webpack模块，有着更广泛的类型支持，不仅仅是js模块而已。（虽然本质上还是先翻译成js模块，但是形式上支持各种类型的模块）。 总的来说，webpack 提供了可定制的、强大和丰富的 API，允许任何技术栈使用 webpack，保持了在你的开发、测试和生成流程中的无侵入性(non-opinionated)。

index.js
import Header from './header';
import Sidebar from './sidebar';
import Content from './content';

new Header();
new Sidebar();
new Content();
header.js

function Header() {
  var dom = document.getElementById('root');
  var header = document.createElement('div');
  header.innerText = 'header';
  dom.appendChild(header);
}
export default Header;
siderbar.js

function Sidebar() {
  var dom = document.getElementById('root');
  var sidebar = document.createElement('div');
  sidebar.innerText = 'sidebar';
  dom.appendChild(sidebar);
}

export default Sidebar;
content.js
function Content() {
  var dom = document.getElementById('root');
  var content = document.createElement('div');
  content.innerText = 'content';
  dom.appendChild(content);
}
export default Content;

我们看之前这个文件，Header是什么呢，是一个模块，Sidebar和Content一样，也是一个模块。webpack的作用实际上可以把这些模块打包到一起的这样一个工具。所以他叫做模块打包工具。所以一看到import，就应该想到后面是一个模块。

我们在写代码的时候，不仅碰到过ES Moudule这样的模块规范，还有commonJS(node里面最常用的模块规范)，CMD,AMD。 这样的模块规范，webpack一样可以正确的识别。举个例子，我们把index.js的方式改成commonJS的方式。

var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');


new Header();
new Sidebar();
new Content();
 

commonJS是require这样的导入方式，如果这样导入的话，相应的导出模块也要有相应的变化。不再是是export default的方式了。要用commonJS的规范
 

header.js
function Header() {
var dom = document.getElementById('root');
var header = document.createElement('div');
header.innerText = 'header';
dom.appendChild(header);
}
module.exports = Header;
sidebar.js
function Sidebar() {
var dom = document.getElementById('root');
var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.appendChild(sidebar);
}


module.exports = Sidebar;
content.js
function Content() {
var dom = document.getElementById('root');
var content = document.createElement('div');
content.innerText = 'content';
dom.appendChild(content);
}
module.exports = Content;

这样就可以了，module.exports是commonJS的导出方式，webpack是一个模块打包工具，他可以识别出任何模块引入的语法。

所以到这，就可以很明显的知道webpack不是翻译器，他是一个模块打包工具。最早的时候，webpack推出的时候，他是一个js的模块打包工具。随着webpack的发展，他已经不仅仅是js文件了。他还可以打包其它任何形式的模块文件。比如在react,vue的框架里面.

      var style = require('./index.css');
      
     import style from './index.css';

他还可以打包jpg,png这样的图片文件，他可以打包任何你想打包的内容，所以webpack准确的定义，他就是一个模块打包工具。

Webpack正确安装方式

webpack是基于nodejs开发的模块打包工具，本质上是由nodejs实现的，要想使用webpack,我们首先需要安装nodejs环境

1.进入nodejs官网，选择最新的LTS版本(稳定版)，为什么尽量用最新的版本呢，为了提升webpack打包效率

2.安装好以后，可以控制台输入 node -v 验证是否安装成功(如果安装成功，会打印出node版本号)

3.然后再验证npm是否安装成功 npm -v(安装node的时候，npm包管理工具会一同安装)

4.然后我们创建一个文件夹 ，姑且命名为 webpack-demo,创建好以后，切换到这个文件夹。然后输入命令npm init， 这个命令会帮助我们以node规范的形式创建一个node的包文件。所以，如果我们想用webpack管理项目，首先要让项目符合node的规范。当我们运行了这个命令，去初始这个项目的时候，这个项目就会符合node的规范。 这个命令会在文件夹里生成一个package.json的文件，这个文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等等

我们还可以去编辑这个package.json的文件

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,   // 这个新加的配置，表示我们这个项目是一个私有项目，它不会被发布到npm线上仓库里去
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

当我们项目初始化完成以后，就可以安装webpack了 ，它的安装分两种方式

  • 方式1：全局安装

不推荐这种安装方式，如果有两个项目，一个是webpack3配置的，一个是webpack4配置的，如果全局安装了webpack4,那么那个webpack3的项目可能是启动不了的

//全局安装webpack的同时我们还安装了webpack的脚手架工具
npm install webpack webpack-cli -g

安装好以后，我们通过 webpack -v来打印 版本好 以确认是否安装成功

$ webpack -v
4.41.2

既然不推荐，如果已经全局安装过了，可以先删除了全局安装的 webpack和cli

npm uninstall webpack webpack-cli -g

方式2：项目内(局部)安装

切换到项目后，可以输入

npm install webpack webpack-cli --save-dev  //或者 npm install webpack webpack-cli -D

安装后以后，项目目录下会多出 node_modules文件夹，这里放的是webpack和它依赖的一些包

  • 当我们安装好以后，再通过输入 webpack -v去查看版本是行不通的。因为当我们输入这个命令后，node会尝试在全局模块的目录中去找webpack，因为我们webpack没有安装在全局,所以是找不到的。

  • 好在node给我们提供了一个 npx命令，我们可以通过 npx来运行webpack(npx这个命令，会帮我们在当前项目目录的node_modules文件夹里去找要执行的命令)

  • 如果我们安装webpack的时候，想安装具体的版本，可以这样写 ，@符号后跟具体的版本号。如果不知道要安装的版本号是否存在，可以先查一下，命令是 npm info webpack
//这个当我们有不同的项目，使用不同版本的webpack的时候，我们就可以通过这个方法去安装了
  • 当我们把代码上传到线上仓库的时候，通常是不会把node_modules文件夹上传的，也就是说如果我们直接从远程仓库clone代码到本地，是不能运行的，这个时候我们只需要 运行 npm install去重新安装项目依赖就可以了

总结一下 三种打包方式

1.全局安装的打包方式 webpack index.js

2.局部安装的打包方式 npx webpack index.js

3.npm scripts配置脚本 npm run bundle

  • 这样配置好以后，当我们运行 npm run bundle时 跟我们配置前运行 npx webpack是一样的效果
  • 这3种方式归根结底，都是在命令行执行 webpack命令

还记得我们一开始安装webpack的时候，一起安装的那个 webpack-cli这个包吗？

它的作用主要就是使我们可以在命令行里正确的运行 webpack这个命令，如果不安装这个包，我们就没有办法在命令行里正常运行 webpack或npx webpack 这样的指令!!

avatar
文章
阅读
粉丝