webpack基本介紹以及安裝使用

1.什麼是webpack？

WebPack也叫做模塊打包機。

作用：分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器
不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包
爲合適的格式供瀏覽器使用。

在 Webpack 裏一切文件皆模塊，通過 Loader 轉換文件，通過 Plugin 注
入鉤子，最後輸出由多個模塊組合成的文件。

2. 爲什麼要用webpack?

Webpack與Gulp/Grunt區別

Gulp/Grunt是一種能夠優化前端的開發流程的工具((任務流工具)，而WebPack是
一種模塊化的解決方案（模塊打包工具）;

a. Gulp/Grunt和webpack的工作方式有較大的區別：

1)Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似
編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

2): Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件

b. 被grunt和gulp對代碼的處理，只是局部變量名被替換簡化，整體並沒有發生改變，還是自己的代碼，而webpack則進行了更徹底的打包處理，更加偏向對模塊語法規則進行轉換。主要任務是突破瀏覽器的鴻溝，將原本瀏覽器不能識別的規範和各種各樣的靜態文件進行分析，壓縮，合併，打包，最後生成瀏覽器支持的代碼，因此，webapck打包過後的代碼已經不是你寫的代碼了；

c. Gulp/Grunt集成度不高，要寫很多配置後纔可以用，無法做到開箱即用;
而webpack專注於處理模塊化的項目，能做到開箱即用一步到位，使用場景不限於web開發。但是webpack只能用於採用模塊化開發的項目。

2）Grunt vs Gulp

Grunt的出現早於Gulp,他們本質上都是通過JavaScript語法實現了shell script命令的一些功能。

a. 書寫方式
```
  grunt 運用配置的思想來寫打包腳本，一切皆配置，所以
  會出現比較多的配置項，諸如option,src,dest等等。而且不同的
  插件可能會有自己擴展字段，導致認知成本的提高，運用的時候
  要搞懂各種插件的配置規則。
  
  gulp 是用代碼方式來寫打包腳本，並且代碼採用流式的寫法，只抽
  象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口,運用相當簡單
  。經嘗試，使用gulp的代碼量能比grunt少一半左右。
```
b. 任務劃分
```
  grunt 中每個任務對應一個最外層配置的key, 大任務可以包含小任務，
  以一種樹形結構存在。

  gulp 中沒有子任務的概念。
```
c. 運行效率
```
 grunt 採用串行的方式執行任務

 gulp 基於並行執行任務的思想
```

3. loaders

webpack 只能理解 JavaScript 和 JSON 文件。loader 讓 webpack 能夠去處理其他類型的文件，
並將它們轉換爲有效模塊，以供應用程序使用，以及被添加到依賴圖中。

Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders
的配置包括以下幾方面：

        test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）

        loader：loader的名稱（必須）

        include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件
        （文件夾）（可選）；

        query：爲loaders提供額外的設置選項（可選）

4.webpack的基本使用

要使用webpack首先需要安裝好node的環境

首先全局安裝webpack
```
npm install -g webpack@3.6.0
```
webpack1.0+的版本和2.0+、3.0+的版本時不兼容的，
創建一個項目文件夾，然後執行npm init 指令，它會彈出很多問答，如項目名稱、作者、密碼之類的，一般全部回車即可，這個指令是npm的標準配置文件，能夠生成package.json文件，記錄這個項目相關的配置和安裝過的依賴。
```
npm init 
```
cd到項目文件夾下把webpack安裝到你的項目目錄裏面
```
npm install --save-dev webpack@3.6.0
```

回到之前的空文件夾，並在裏面創建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放之後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來我們再創建三個文件:

index.html --放在public文件夾中;

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Webpack Sample Project</title>
   </head>
   <body>
      <div id='root'>
      </div>
      <script src="bundle.js"></script>
   </body>
   </html>

Greeter.js-- 放在app文件夾中

 module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there djgdghodghdo greetings!";
  return greet;
};
 ```

main.js-- 放在app文件夾中

   const greeter = require('./Greeter.js');
   document.querySelector("#root").appendChild(greeter())

5.至此，webpack打包文件之前需要做的準備都已經好了，接下來就是打包文件了，打包文件有兩種方式，一種是手動打包，一種是通過配置文件打包；

1）手動打包文件的操作方法如下：

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

   webpack app/main.js public/bundle.js

如果打包成功會有相應的提示，並生成對應的bundle.js打包後的文件。

通過配置文件打包文件：

 首先在項目的根目錄下創建一個webpack.config.js文件，文件的配置信息如下：

     //“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。
     module.exports = {
         devtool: 'eval-source-map',       //生成source-maps幫助我們找到出錯的地方，eval-source-map能構建出完整的source-maps，速度快，適合開發階段，生產階段不適合
      
         entry:  __dirname + "/app/main.js",         //唯一的入口文件

         output: {                                
            path: __dirname + "/public",              //打包後的文件存放的地方
            filename: "bundle.js"                    //打包的文件名
         }
      }

配置此文件之後可以直接在命令行輸入"webpack"指令就可以直接打包文件了。

注意：如果你覺得輸入webpack很麻煩那麼你可以通過在package.json文件中配置：

         {
            "name": "webpack-sample-project",
            "version": "1.0.0",
            "description": "Sample webpack project",
            "scripts": {

               "start": "webpack"        // 修改的是這裏，JSON文件不支持註釋，引用時請清除
            },
            "author": "zhang",
            "license": "ISC",
            "devDependencies": {
               "webpack": "3.10.0"
            }
      }

配置完後則直接在在命令行輸入npm start

打包成功的話你會在public目錄下看到打包後的文件bundle.js

** 查看打包結果有兩種方式，一是在命令行，二是在瀏覽器查看 **

a. 命令行查看，你可以在命令行窗口輸入以下指令：（一般不使用）

   node public/bundle.js

命令行會打印出運行結果。(你的文件裏面有document的相關操作,如，創建節點等命令行會報“documnet no defined”的錯誤，js文件中使用console則不會，能正常打印出結果)

b. 這時webpack打包的文件是沒有部署服務的，如果你在瀏覽器輸入localhost/public/index.html是不會有結果的，應該要在瀏覽器輸入：


file:///D:/demoproject/public/index.html

如果文件打包沒問題的話就會在瀏覽器中輸出Greeter.js中的文本內容

思考：如果我一定要用localhost在瀏覽器訪問項目的index.html呢？

    打包過幾遍之後你會發現，以上配置有一個很不友好的地方就是，如果你修改文件中的某一個佈局或者樣式，你要看到修改的效果是需要再次打包的，打包成功之後才能看到修改的內容；

    那麼有什麼方法能讓我們能用localhost就可以在瀏覽器訪問到項目的頁面，對於頁面的修改能夠動態刷新呢？

    webpack-dev-server能很好的幫我們解決這個需求。

什麼是webpack-dev-server?

webpack-dev-server是webpack官方提供的一個小型Express的http服務器。相當於webpack+apache，啓動一個web服務並實時更新修改。

它的作用主要是用來服務資源文件（默認在當前目錄下，可通過content-base指定）。此外這個Http服務器和client使用了websocket通訊協議，原始文件作出改動後，webpack-dev-server會實時的編譯，但是最後的編譯的文件並沒有輸出到目標文件夾，而是保存在內存中。

webpack-dev-server的使用

webpack和webpack-dev-server的搭配使用是有版本限制的，一般我們要遵循向下兼容的原則，儘量使用同一版本的webpack和webpack-dev-server，或者高版本的webpack和低版本的webpack-dev-server;

本文使用webpack3.6.0和webpack-dev-server1.15.0；

1）全局安裝webpack-dev-server

npm install  webpack-dev-server@1.15.0 -g

2)在項目中安裝webpack-dev-server

npm install --save-dev webpack-dev-server@1.15.0

修改配置webpack.dev.config.js文件

const path = require('path')

module.exports = {
   devtool: 'eval-source-map',       //生成source-maps幫助我們找到出錯的地方，eval-source-map能構建出完整的source-maps，速度快，適合開發階段，生產階段不適合

   entry:  __dirname + "/app/main.js",         //唯一的入口文件

   output: {                                
      path: __dirname + "/public",              //打包後的文件存放的地方
      filename: "bundle.js"                    //打包的文件名
   },
   devServer: {
      port: 8080,       //端口
      contentBase: path.join(__dirname, './public'),   //本地服務器所加載的頁面所在的目錄
      historyApiFallback: true,                 //如果設置爲true，所有的跳轉將指向index.html
      host: '127.0.0.1',
      inline: true                            //實時刷新
   } 
}

執行命令開啓web服務

 webpack-dev-server --config webpack.dev.config.js --color --progress

訪問網址： http://127.0.0.1:8080/

注意：如果要簡化以上命令的話可以配置package.json文件

   {
   "name": "demoproject",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack --config webpack.dev.config.js",
      "start": "webpack-dev-server --config webpack.dev.config.js --color --progress"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "webpack": "^3.6.0",
      "webpack-dev-server": "^1.15.0"
   }
   }

配置完後，運行命令可以改爲 npm start

webpack基本介紹以及安裝使用

1.什麼是webpack？

2. 爲什麼要用webpack?

3. loaders

4.webpack的基本使用

require.context()

webpack基本介紹以及安裝使用

webpack中文文檔筆記——起步

js——正則表達式

ES6常用語法——變量的解構賦值

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結