webpack超初級教學

我是跟着這個學的http://www.jianshu.com/p/42e1...，這個文有些東西是webpack1.0的東西，我在個人超初級教程進行了部分更改，有什麼錯誤但願你們指出。
首先在全局進行安裝

npm install -g webpack

安裝到項目目錄

npm install --save-dev webpack

初始化一個package.json文件，能夠在其中寫入項目依賴模塊，以及自定義腳本任務。

npm init

根據教程給的例子一共建立兩個文件夾
app文件夾---存放一個main.js做爲入口文件，主要調用其餘的js模塊，其餘js均做爲模塊存在
模塊化寫法通常爲module exports=function（）{}用來暴露函數 也能夠當作一個對象進行暴露，模塊化引入能夠用require來將模塊引入，須要實例化執行函數 puclic文件夾---存放index.html做爲網頁顯示，繼續在控制檯執行webpack命令：

webpack  ./app/main.js(入口文件) ./public/bundle.js(打包出來的文件)

如今打開public文件夾會發現多一個bundle.js index.html引入bundle.js就會執行你在app文件夾下的js文件命令了
以上爲webpack低級用法

利用webpack配置文件進行文件打包操做以及寫入插件和加載器。
建立文件：webpack.config.js 前端工做者通常會用config.js進行配置，好比最近的項目須要針對不一樣的危險級別進行顏色配置，咱們能夠在color.config.js這樣寫一個對象

colorConfig：{sample：「green」，warn：‘yellow’，‘danger’：‘red’}

當咱們引入配置文件後，能夠從後臺拿到sample，warn，danger這三個字段，咱們統一用

colordata表示，這時候咱們就能夠給咱們須要的字段添加style顏色 id.style.fontSize=colorConfig[colordata]

回到webpack，webpack的配置文件則比我寫的功能多得多，首先將配置內容進行暴露

module.exports  = {
   entry:__dirname+"/app/main.js"， //須要打包時的入口文件
   output: {
           path:__dirname+"/public",//輸出路徑__dirname指的是當前配置文件的絕對路徑，是一個node.js的變量
         filename:"bundle.js"//輸出文件名
   }
}

將寫好的配置文件置於根目錄下，控制檯執行webpack命令,執行後，webpack會直接解讀配置文件暴露出來的對象，並

且自動打包在public目錄下生成bundle.js

利用npm start命令更便捷的操做webpack，npm主要是針對package.json中寫入的命令進行解析執行的，因此咱們開始

學習一些簡單的命令，寫入package.json中
（1）用npm start代替webpack命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "start":"webpack"//只須要寫入這句就能夠啦
  },

start是一個特殊的命令，若是想用其餘代替start，好比npm go那麼須要寫成npm run go

webpack強大的功能出現！！！
一·Source Maps (資源輪詢?)可讓編譯後的文件可讀性更高。
首先須要注意的是，只要關於webpack操做的都添加到webpack配置文件中，不要把package.json與config搞混
二. webpack server 構建webpack服務器，實時監測你的代碼
這是一個插件，因此須要npm來下載到你的module中
命令行執行命令:npm install --save-dev webpack-dev-server
若是運行出錯，有兩處最有可能出現的錯誤，其中一個是在package.js中，看看是否忘記增長逗號，另外一個錯誤就是

執行命令是否寫錯。
下載有些慢，須要等待，這時候咱們能夠閱讀下devServer的api，在配置文件下寫入

devServer:{
        contentBase:"./public",//本地服務器加載的頁面所在的目錄
        historyApiFallback:true,//不跳轉
        inline:true//實時刷新
    }

最後運行下npm start 試試新加入的功能，爲何個人打開瀏覽器localhost:8080很差用！！！！咱們先無論，下一

步先，
我今天知道啦：因爲咱們是用npm start來執行webpack打包，因此咱們須要在package.json裏面

將「start」:"webpack"加點料 「start」：「webpack-dev-server --inline」我讓咱們試一下、、
哈哈 成功了
三·loaders繼續
Loaders聽說是webpack最牛的功能------=之一。主要功能是將es6,7，或者scss，sass都轉成瀏覽器能夠識別的文件
Loaders須要單獨安裝，而且在配置文件的module關鍵字下配置。
教程中給了一個轉換json的loader
首先控制檯下載安裝npm install --save-dev json-loader
而後在配置文件的module下添加

loaders：[
   {
       test:/\.json$/,
       loader:"json"
    }
]

只要點擊保存，頁面也會隨之變化。
下面教程說的是關於react的，我只弄過vue，我的感受Vue更簡單，建立一個Vue腳手架項目只有四個命令

1你得有node
2npm install -g vue-cli
3vue init webpack yourprojectname
4cd yourprojectname
5npm install
6npm run dev

開發起來很簡單，我的感受比react容易的多
略過噁心人的Babel讓咱們接着看看他的教程，他講的都是react，我依然推薦vue，哈哈哈。
額，後面講的東西若是你使用Vue腳手架的話，我的感受這篇文章學習一下就ok了。
github倉庫地址：https://github.com/kindLee-al...