大声对webpack4.0说声你好之webpack的基本使用(一)

阿鑫不会前端
3,525 阅读9分钟

首先很感谢看到这篇文章的各位朋友，我是一个比较热爱技术的菜鸟，写这篇文章是对我看到某课网《从基础到实战 手把手带你掌握新版Webpack4.0》的总结，也算做自己的一次学习记录，如果对您有帮助我表示很荣幸，但如果您看到了我的错误总结还请您不吝赐教。

webpack是什么？

Webpack 是一个开源的前端打包工具。

前端代码的发展史

以前的前端代码对比


// html
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>

// index.js
var header =  document.createElement('div');
header.innerText = '头部';
document.body.append(header);

var slider =  document.createElement('div');
slider.innerText = 'slider';
document.body.append(slider);

var footer =  document.createElement('div');
footer.innerText = '底部';
document.body.append(footer);

相对于我们页面三个模块，header/sliser/footer

  • 整个页面会出现非常多的代码
  • 出现问题，不能直接定义到具体内容
  • 所有js在一个文件中造成文件过大

代码拆分过程

于是我们将代码进行拆分成3个独立的模块

// index.html
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./header.js"></script>
<script type="text/javascript" src="./slider.js"></script>
<script type="text/javascript" src="./footer.js"></script>
<script type="text/javascript" src="./index.js"></script>
</html>

// header.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}

// slider.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}

// index.js
new Header();
new Slider();
new Footer();

相比之前的代码，很快我们就能总结出优劣势

  • 代码更加模块化
  • 文件内容大量减少
  • 不能直接定位到某个模块内容
  • 文件数量大大增加，也增加了资源的请求数量

你好，我是import ... from ...

大家都知道在es6中我们使用import来导入一个模块，这样的话我们就能很快的改写一下之前的代码（Es moudule 模块引入方式）

// index.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}
export default Header

// silder.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}
export default Slider

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}
export default Footer

// index.js
import Header from './header.js'
import Slider from './slider.js'
import Footer from './footer.js'

new Header()
new Slider()
new Footer()

你好，我是moudule.export require

// index.js
var Header = require('./header.js')
var Slider = require('./slider.js')
var Footer = require('./footer.js')

new Header()
new Slider()
new Footer()

// header.js
function Header(){
	var header =  document.createElement('div');
	header.innerText = '头部';
	document.body.append(header);
}
module.exports = Header

// slider.js
function Slider(){
	var slider =  document.createElement('div');
	slider.innerText = 'slider';
	document.body.append(slider);
}
module.exports = Slider

// footer.js
function Footer(){
	var footer =  document.createElement('div');
	footer.innerText = '底部';
	document.body.append(footer);
}

module.exports = Footer

这样的话，代码就会变模块清晰，但是在运行过程中，肯定就会发现问题，在浏览器中是不认识import export 等语法的，安装过node.js的我们可以直接使用以下命令来进行处理，详细的介绍我们会在下文中进行说明。

npx webpack index.js

这样的话就会生成一个dist的打包文件夹，在文件夹的里面会有一个main.js。 我们在index.html中直接引入./dist/main.js就可以直接运行。

那么npx又是什么？

npx是npm5.2之后发布的一个命令，我的理解就是一个包执行器。他会帮你执行依赖包里的二进制文件。

那么我们会如何如安装这个webpack呢？

安装webpack

全局安装

npm install -g webpack webpack-cli  // cli可以帮助我们在命令行里正确的运行webpack命令

这样的话，您在项目的任何地方都能使用webpack命令，安装成功之后直接使用

webpack -v

就可以查看当前webpack的版本号

当前这种方式的话，我们是 极力 不推荐这么做的，如果我们现在一个项目中使用的是webpack3.*，另一个项目中使用的是webpack4.*的话,那么所有的项目都会跟着你的全局webpack的配置走。

所以，我们一般都是根据项目的需求来进行安装webpack,例如我的项目的webpack使用的是3.0.6，则在安装的过程中加上@声明版本号即可。

npm install webpack@3.0.6 webpack-cli -D(--save -dev)

附加知识点

npm install moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令
1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

这样的话就能根据项目中具体的版本号来使用webpack

那么我们如何去查看当前的webpack版本号呢？

npx webpack -v

那么这两种webpack的安装方式我们就搞定了。

使用webpack

mkdir webpack-demo
cd webpack-demo
npm init

进行一个webpack的初始化配置。将会按照提示输入一些相关信息，我这里就不多做解释。

然后就会在项目中生成一个package.json文件。

{
  "name": "webpack-demo", // 包名
  "version": "1.0.0", // 版本
  "description": "this is my demo", // 描述
  "main": "index.js", // 外部引用 暴露js文件
  "scripts": { // 配置短命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "axin", // 作者
  "license": "ISC" // 项目许可证
}

我们可以对生成的文件在做一系列的配置

{
    "private": true //私有项目
    ...
}

你也可以使用一个比较简单的命令，它会自动帮你生成一个默认配置项。

npm init -y

以上就是我们对项目的package.json的两种生成方式。

webpack的配置

我们虽然简单的使用了webpack,可能觉得就几句代码，那么他是如何帮我们实现文件打包的呢？实际上，他是使用了webpack官方给出的默认配置，那么我们如何使用自己的配置呢？在项目根目录下新增webpack.config.js

touch webpack.config.js

像我们在上文中提到的 npx webpack index.js ,他就会帮你将index.js中的文件内容进行打包，但是我们直接输入 npx webpack 他就会报错，因为我们根本就没有说明我们会对哪个文件进行打包。

const path = require('path'); // 从nodejs中引入path变量

module.exports = {
  entry: './index.js', // 从哪一个文件开始打包
  output: {
    filename: 'bundle.js',  // 打包后生成的文件的名字
    path: path.resolve(__dirname, 'bundle'), // 打包到哪个文件夹下面 __dirname 当前文件夹的一个路径
  }
}

于是我们就直接对webpack.config.js进行一系列的配置，我已经将详细的注释写明，大家也可以一眼看懂，我们在运行 npx webpack的话,就可以直接对index.js进行打包。并且生成bundle文件夹和bundle.js。

在这里我们是将webpack.config.js作为了我们的配置文件，那么我们如果自定义自己的配置文件名称呢？

// 使用webpackconfig.js作为打包配置文件
npx webpack --config webpackconfig.js

整理文件

我们上面已经会用基本的命令来操作webpack了，但是可能文件会比较乱，例如bundle等属于打包文件，xx.js等属于资源文件，所以我们还会等文件做出一系列的整理。

删除bundle文件夹，新建src文件夹，然后将

index.js
header.js
slider.js
footer.js

放入src文件夹，作为资源文件。

那么改动之后，我们在进行配置webpack.config.js，用来巩固刚才的操作。

// 先将配置文件改回webpack.config.js
mv webpackconfig.js webpack.config.js

// 修改配置文件名称
npx webpack --config webpack.config.js

// 修改配置内容
const path = require('path'); // 从nodejs中引入path变量

module.exports = {
  entry: './src/index.js', // 从src下面的index.js开始打包
  output: {
    filename: 'main.js',  // 打包后生成的main.js
    path: path.resolve(__dirname, 'dist'), // 打包到dist文件夹
  }
}

// index.html 引入
<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
	<div id="root"></div>
</body>
<script type="text/javascript" src="./dist/main.js"></script>
</html>

自定义打包命令

我们现在打包使用npx webpack命令，但是在一些其他的框架中，使用的是

npm run build

那么我们如何配置这个东西呢，相信细心的同学在上面我的注释中已经发现了，在package.json文件中，有一个scripts配置项，在这个配置项里面我们就可以配置一些自己的命令。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "this is my demo.",
  "private": true,
  "scripts": {
    "build": "webpack" // 使用npm run build 打包 相当于 npx webpack
  },
  "author": "axin",
  "license": "ISC"
}

打包输出内容详解

我们在打包之后，会输入打包相关的内容，那我们来看看这些内容具体是什么东西？

请大胆的忽略背景图片

值 解释
Hash 本次打包的唯一hash值
version 本次打包使用的webpack版本号
time 整体打包耗时
built at: 打包时间
asset 打包文件名称
size 打包文件大小
chunks 文件对应的打包id值
chunk names 文件对应的名字
entrypoint main 打包入口文件
文件列表 打包的文件名字列表

可能有疑问的是以下两点 1.警告中的mode是什么？ mode其实就是我们在配置的一个打包压缩模式，如果我们将mode直接写出来

mode: 'production', // production 压缩 development 不压缩打包代码

这样在进行打包的话，就不会再出现警告的问题。

2.chunk names中的main是怎么来的？ 其实我们在配置**entry: './src/index.js'**的时候，实际上等同于如下配置

entry: {
    main: './src/index.js'
}

总结

// 1.安装方式
npm install webpack webpack-cli -g
npm install webpack@x.x webpack-cli -D

// 2.打包文件
npx webpack index.js 

// 3.webpack的配置文件
package.json

// 4.打包配置文件 webpack.config.js 以及 声明配置文件名称
npx webpack --config xx

// 5.自定义打包命令
scripts: {}

// 6.打包输出内容详解

前前后后大概写了4个小时吧，可能自己表达的也不是太好，我也会努力提高自己的写作水平，如果这篇文章对您有帮助，还望您点赞支持一下。 近期会出下一节的webpack文章，期待您的关注。

avatar
文章
阅读
粉丝

友情链接：