webpack簡介

我們都知道，Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

一、安裝nodejs

因為Webpack也是基于Nodejs的，當然，首先我們就需要安裝nodejs了。

1、直接去官網地址(https://nodejs.org/en/download/)下載安裝文件安裝即可，跟安裝普通軟件一樣簡單。

2、通過如下命令測試是否成功安裝nodejs和npm

打開windows命令提示符(在運行中輸入cmd即可打開)，輸入命令：node -v

回車，出現nodejs的版本號，說明nodejs安裝成功。

輸入命令：npm -v

回車，出現npm的版本號，說明npm也安裝成功了。

說明：因為node安裝包中已集成了npm,所以在安裝nodejs的同時也安裝了npm。

如果你已經安裝好Nodejs和npm了，這一步就可以跳過了。

二、 全局安裝webpack

用 npm 安裝 Webpack，命令如下：

npm install webpack -g

這時，我們已經把webpack 安裝到全局環境了，大家可以通過命令行 webpack -v 查看版本號(2.2.1)。

? ??

三、 本地項目安裝webpack

首先，在安裝webpack前，我們先要確保package.json文件已經就緒，如果沒有package.json文件，我們先要通過 npm init創建package.json，因為package.json里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。

然后，我們通過如下命令，將webpack安裝到我們項目的依賴中聊，這樣我才可以使用項目本地版本的 webpack，命令如下：

npm install webpack --save-dev

到這我們的準備都做好了，下面我們就可以開始用webpack了。

四、使用webpack

在使用webpack，我們先創建一個項目，本例是通過如下命令創建的，當然大家可以通過手動創建的方法創建的。

最后生成的項目如圖所示：

說明：

1、src，是本例用來存放源文件的目錄(也就是沒有打包的文件)，里面的scripts存放js等文件，style是存放css文件。

2、dist，是本例用來存放打包后文件的目錄。

為了演示如何使用webpack，我們先來創建1個js文件hello.js和index.html，一個樣式style.css。

hello.js代碼如下：

function yuan(){

var yuan="我是一個js文件啊，剛被創建";

document.getElementById("yuan").innerHTML=yuan;

}

yuan();

index.html:

Document

style.css

body{

margin: 0;

padding: 0;

}

#yuan{

width: 300px;

height: 100px;

background: red;

color: #fff;

font-size: 20px;

font-weight: 600;

text-align: center;

margin: 0 auto;

}

下面我們來使用webpack打包我們的文件hello.js ,如下的命令

webpack src/scripts/hello.js dist/js/build.js

如上圖所示：說明我們把helloj.s打包成功了，此時，我們發現我們的dist/js目錄下已經有了build.js了。如圖所示

以上是我們最簡單的使用webpack的方法，只是簡簡單單地打包一個文件，下面，我們來多增加一個文件main.js，然后再把style.css也打包進去(webpack可以把css打包到js文件里的，是不是很奇怪？放心吧，它就這么干的，后面你就會慢慢知道了)，先來看是如何使用的？

main.js原代碼

function yuan1(){

var yuan1="我是的第二個函數";

console.log(yuan1);

}

這時我們來把main.js作為入口文件改改，改為

require("./hello.js");

require("style-loader!css-loader!../style/style.css");

function yuan1(){

var yuan1="我是的第二個函數,現在我是入口文件了";

console.log(yuan1);

}

這個時候，你會發現，啥？怎么引入css多個style-loader、css-loader了？

其實是，在webpack中，我們想在js文件中通過require的方式來引入css，那就需要通過css-loader來實現。而style-loader的作用是在html中以style的方式嵌入css(到時候我們引用的這個style.css文件會直接插入到index.html的head標簽里)。如果不引入這些loader去處理，那么我們直接require(“../style/style.css”)，那么會報錯的。

我們在使用style-loader、css-loader之前，先要安裝好它們，下面我們通過如下命令安裝它們，

npm install css-loader style-loader --save-dev

當我們引入好以后，然后我們就可以在命令里運行了：(這時我們是main.js)

webpack src/scripts/main.js dist/js/new-build.js

如圖所示：打包成功了

這時你會發現在我們的new-build.js里，多了main.js的代碼和css的代碼，css代碼如下

// module

exports.push([module.i, "body{\r\n margin: 0;\r\n padding: 0;\r\n}\r\n#yuan{\r\n width: 300px;\r\n height: 100px;\r\n font-size: 20px;\r\n font-weight: 600;\r\n text-align: center;\r\n margin: 0 auto;\r\n}\r\n", ""]);

為了看效果，我們把index.html的引用文件改為new-build.js。打開index.html，效果如圖：

如上圖所示，查看我們的源代碼：是不是已經把style.css里面的樣式添加到head里了。

五、后記

上面的main.js，我們是直接在require里寫入css-loader和style-loader的(require(“style-loader!css-loader!../style/style.css”))，

其實我們還可以在webpack.config.js配置文件中使用

{ test: /\.css$/, loader: ‘style-loader!css-loader’ }

詳細內容后續會記錄。

有時候我們不斷的修改css或者js，需要不斷地在命令行輸入這些命令進行打包，挺繁瑣的，那有沒有簡單的方法，不用每次都輸入，修改完成后文件后自動打包更新呢？可以的，在上面基礎上，我們可以在命令后面加上–watch，如下：

webpack src/scripts/main.js dist/js/new-build.js --watch

此后，我們可以隨時修改我們的css和js文件了，然后watch會自動監控這些更新，然后打包，我們只需在瀏覽器刷新我們的index.html就馬上可以看到效果了。

總結

以上是生活随笔為你收集整理的webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。