webpack安裝以及一些配置

 

 

 

 

在用webpack以前... 或說沒有實現組件化以前的web1.0時代!

 

 

 

 

最終邁向web2..0以後的時代!

===============華麗的分割線==================

 

安裝步驟有兩步:

 

1. 首先安裝  全局

npm install -g webpack

2. 再安裝局部

npm install --save-dev webpack

爲了控制版本不一的狀況，實際狀況就是這樣.

 

安裝好了就是這樣(全局安裝即每一個目錄均可以獲得你安裝的信息)

 

好了下一步操做!

==錯了。

要先

npm init

生成一系列信息！

本地安裝： npm install package-name

全局全裝： npm install -g  package-name

 

升級：  npm update 

卸載：  npm uninstall 

 

經過package.json 

刪除不須要的依賴信息：

{

"name":"myPackage",

"version":"0.0.1",

"dependencies":{

"abc":">0.0.2"}

}

好了，卸載npm包管理！

 

再次生產：npm init

一股勁的回車就行，目測！

mdzz，不行，乖乖！

 

乖乖，只有第一個名字不能爲空，其他回車跳過就行！！！

 

搞定（上面的信息僅是測試，是不許備發佈的）

 

個人測試目錄是這樣的!

在這裏我不浪費vscode的目錄結構而去使用Linux tree了

 

好了，填坑（代碼）

index.html生產目錄結構：

 

一個！產生的目錄結構

 

Emment神器！

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，# {destination for bundled file}處填寫打包文件的存放路徑# 填寫路徑的時候不用添加{}

forwebpack {entry file} {destination  bundled file}

webpack app/main.js public/bundle.js

後面的打包文件能夠不存在！ 執行命令後自動生成！

 

打包成功一個！

 

其實，經過loaders和plugs最好了!

下面配置文件：

 

在當前目錄下：webpack

便可經過配置文件生成：

 

更快捷的執行打包任務

 

注：package.json中的script會安裝必定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，因此不管是全局仍是局部安裝的Webpack，你都不須要寫前面那指明詳細的路徑了。

 

npm的start命令是一個特殊的腳本名稱，其特殊性表如今，在命令行中使用npm start就能夠執行其對於的命令，若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用npm run {script name}如npm run build，咱們在命令行中輸入npm start試試，輸出結果以下：

 

這時候1條命令便可解決：

 npm start

 

 

 

 

咱們選擇中小項目用的源碼地圖！

使用webpack構建本地服務器

先安裝到本地：

npm install --save-dev webpack-dev-server

 

 

開啓服務器兩個步驟：

 

1. 配置package.json

 

2. 配置webpack.config.js(webpack.conf.js)

 

 

最後npm run server !

 

 

 

OK，自動彈出瀏覽器並進入！

 

Loaders

鼎鼎大名的Loaders登場了！

 

 

 

 

 

注 因爲webpack3.*/webpack2.*已經內置可處理JSON文件，這裏咱們無需再添加webpack1.*須要的json-loader。在看如何具體使用loader以前咱們先看看Babel是什麼？

 

 

安裝Babel:

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

 

再安裝：

react和react-dom

npm install --save react react-dom

 

一切皆模塊

Webpack有一個不可不說的優勢，它把全部的文件都都當作模塊處理，JavaScript代碼，CSS和fonts以及圖片等等經過合適的loader均可以被處理。

CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

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

 

請注意這裏對同一個文件引入多個loader的方法。

咱們這裏例子中用到的webpack只有單一的入口，其它的模塊須要經過 import, require, url等與入口文件創建其關聯，爲了讓webpack能找到」main.css「文件，咱們把它導入」main.js 「中，以下

 

CSS module

在過去的一些年裏，JavaScript經過一些新的語言特性，更好的工具以及更好的實踐方法（好比說模塊化）發展得很是迅速。模塊使得開發者把複雜的代碼轉化爲小的，乾淨的，依賴聲明明確的單元，配合優化工具，依賴管理和加載管理能夠自動完成。

不過前端的另一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全局類名，維護和修改都很是困難。

最近有一個叫作 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，動畫名默認都只做用於當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置後，你所須要作的一切就是把」modules「傳遞到所須要的地方，而後就能夠直接把CSS的類名傳遞到組件的代碼中，且這樣作只對當前組件有效，沒必要擔憂在不一樣的模塊中使用相同的類名形成衝突。具體的代碼以下