大聲對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教程