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

时间  2020-05-30
标签 大声 webpack4.0 webpack 你好 基本 使用 繁體版
原文   原文链接

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

webpack是什么？

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

前端代码的发展史

之前的前端代码对比

// 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个独立的模块java

// 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();
复制代码

相比以前的代码，很快咱们就能总结出优劣势node

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

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

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

// 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的咱们能够直接使用如下命令来进行处理，详细的介绍咱们会在下文中进行说明。es6

npx webpack index.js
复制代码

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

那么npx又是什么？

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

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

安装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文章，期待您的关注。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程