webpack簡介

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

一、安裝nodejs

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

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

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

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

回車，出現(xiàn)nodejs的版本號，說明nodejs安裝成功。

輸入命令：npm -v

回車，出現(xiàn)npm的版本號，說明npm也安裝成功了。

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

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

二、 全局安裝webpack

用 npm 安裝 Webpack，命令如下：

npm install webpack -g

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

? ??

三、 本地項目安裝webpack

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

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

npm install webpack --save-dev

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

四、使用webpack

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

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

說明：

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

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

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

hello.js代碼如下：

function yuan(){

var yuan="我是一個js文件啊，剛被創(chuàng)建";

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打包成功了，此時，我們發(fā)現(xiàn)我們的dist/js目錄下已經(jīng)有了build.js了。如圖所示

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

main.js原代碼

function yuan1(){

var yuan1="我是的第二個函數(shù)";

console.log(yuan1);

}

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

require("./hello.js");

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

function yuan1(){

var yuan1="我是的第二個函數(shù),現(xiàn)在我是入口文件了";

console.log(yuan1);

}

這個時候，你會發(fā)現(xiàn)，啥？怎么引入css多個style-loader、css-loader了？

其實是，在webpack中，我們想在js文件中通過require的方式來引入css，那就需要通過css-loader來實現(xiàn)。而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

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

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

如圖所示：打包成功了

這時你會發(fā)現(xiàn)在我們的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，效果如圖：

如上圖所示，查看我們的源代碼：是不是已經(jīng)把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’ }

詳細內(nèi)容后續(xù)會記錄。

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。