npm & webpack

時間 2019-11-14

標籤 npm webpack 简体版

原文原文鏈接

npm 全稱 node package manager，是 js 的包管理工具，開發人員能夠把寫好的框架、庫發佈到 npm 上，使用者在使用時候就可很方便地經過 npm 來下載，只要在 npm官網有的包，就可經過 npm install 包名 下載，包名都是惟一的不會重複css

npm 與 nodejs 共同發佈，因此在 nodejs官網下載安裝了 nodejs 後就可直接在命令行中使用 npm。經過查看版本檢查二者是否安裝成功html

由於 npm 的更新頻率更快，因此可單獨更新 npmnode

npm install npm --global　　//--global爲全局安裝,可簡寫爲--g

因爲個人 nodejs 是用的舊版本，因此致使更新 npm 時出錯，去官網下載了最新版 nodejs 後問題解決jquery

package.jsonwebpack

package.json 是包描述文件，存儲着包的信息（包名、版本、項目的依賴項），最好每一個項目都要有個 package.json 文件，就像產品說明書web

此文件可本身普通文本更名的方式建立，但通常是 npm 命令建立，在當前目錄打開命令行輸入 npm init shell

運行此命令後，會以嚮導的方式填寫包的信息，不想填的話可回車略過。也可以使用 npm init --yes 命令直接快速建立，最後根據須要修改建立好的 package.json 文件便可npm

建議執行 npm install 包名 時加上--save，會在 package.json 的 dependencies 屬性添加依賴項，保存第三方包的依賴信息json

npm install --save jquery

當依賴包沒有的時候，直接執行 npm install 命令，則會根據當前目錄的 package.json 文件的 dependencies 裏全部依賴項自動所有下載完瀏覽器

npm 經常使用命令

npm 5 版本以後會自動生成 package-lock.json 文件，而且安裝包的時候都會生成或更新這個文件

安裝包時也不須要加 --save 參數，會自動保存依賴信息

package-lock.json 這個文件會保存 node_modules 中全部包的信息（版本、下載地址），這樣的話從新 npm install 的時候速度會更快，另外一個做用是鎖定下載的包的版本號，防止自動升級新版

安裝webpack

webpack是模塊打包機，把 css、js、less 等打包成一個總的js文件供瀏覽器使用

webpack 要先進行全局安裝

到了 webpack4，命令行相關的內容都移到 webpack-cli，因此還須要安裝 webpack-cli，不然會出現以下信息

由於 webpack 是全局安裝的，因此 webpack-cli 也要全局安裝

以後可查看 webpack 版本

小Demo

準備就緒，開始寫小案例一個加法計算器，在F盤新建了個文件夾名爲 Demo，進入這個空文件夾shift+右鍵選擇「在此打開命令行」或 Powershell 窗口

在當前本身的項目裏（這裏爲 Demo 文件夾）安裝局部 webpack

以後Demo文件夾會出現node_modules和package-lock.json

而後使用 npm init 命令初始化一個 package.json ，

以後在Demo下建立兩個文件夾（ src與dist ）和一個空的 js 文件（ webpack.config.js ）

src 存放人能夠看懂的源代碼，具有必定的功能劃分如MVC

dist 存放真實上線的代碼（減小請求、混淆代碼），機器能看懂

webpack.config.js 是 webpack 工具的配置文件，用來將src下的代碼打包生成dist下的代碼

接下來要配置 webpack.config.js，好像涉及到 nodejs 的內容...... 要學習下

var path = require('path'); module.exports = { //指定入口文件
 entry: { entry: './src/main.js' }, //指定出口文件.打包生成build.js,若是沒有dist文件夾會自動建立.最好寫絕對路徑，否則會報下圖中的錯誤Invalid configuration object
 output: { path: path.join(__dirname,'dist'), filename: 'build.js' }, //模塊,指定加載器,可配置各類加載器,這樣就不擔憂less等文件的編譯問題，這裏用不到因此沒寫
 module: {} };

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="n1"> + <input type="text" id="n2">
    <button id="btn">=</button>
    <input type="text" id="result">

<script src="../dist/build.js"></script>
</body>
</html>

main.js

//commonjs方式引入cal對象，因爲node的模塊做用域，因此必需要導入，以後才能使用這個對象 //var cal = require('./cal.js');

//ES6的模塊方式引入
import cal from './cal.js'; //獲取按鈕
document.getElementById('btn').onclick = function(){ var n1 = document.getElementById('n1').value - 0; var n2 = document.getElementById('n2').value - 0; var sum = cal.add(n1,n2); document.getElementById('result').value = sum; };

cal.js

var cal = { add:function(n1,n2){ return n1 + n2; } }; //commonjs導出方式 //module.exports = cal; //ES6導出方式
export default cal;

最後直接在當前目錄使用 webpack 命令便可完成打包

瀏覽器中效果圖，點擊等號算出結果

npm源

因爲npm官網是國外的，因此使用 npm install 命令下載時可能會很慢，這時可以使用淘寶的npm鏡像，至關於將官網的內容複製了一份放在國內。使用方式有三種

❶ 全局安裝淘寶的 cnpm，使用 cnpm 就會經過淘寶的服務器下載。以後，用到 npm 的地方改成 cnpm 便可

❷ 若不想安裝 cnpm 又想使用淘寶的服務器來下載，每次下載時在後面加上--registry=https://registry.npm.taobao.org 便可，如

❸ 每次手動添加會很麻煩，因此可把這個選項加入配置文件中，以後全部的 npm install 都會默認經過淘寶的服務器下載

查看 npm 配置信息，可以使用命令 npm config list

1. npm 、webpack 、 vue-cli
2. npm webpack vue-cli
3. npm和webpack
4. npm gulp webpack
5. webpack和npm
6. npm + webpack +react
7. npm、webpack、vue-cli
8. npm nrm cnpm webpack webpack-dev-server
9. 安裝nodejs、webpack、npm
10. webpack npm node 關係
更多相關文章...
• ionic 安裝 - ionic 教程

相關標籤/搜索

vue+webpack+npm+elementui

npm+babel+webpack

npm+webpack+sass

npm+webpack+babel+react

webpack+vue+npm

vue+webpack+npm

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。