3-WebPack

時間 2019-11-24

標籤 webpack 简体版

原文原文鏈接

1、什麼是WebPack

WebPack能夠看作是模塊加載、打包工具。css

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

工做方式

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴模塊，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
任何靜態資源均可以視做模塊，而後模塊之間也能夠相互依賴，經過webpack對模塊進行處理後，能夠打包成咱們想要的靜態資源。node

2、安裝

在控制檯使用npm安裝[須要事先裝好node和nmp]react

//全局安裝
npm install -g webpack

3、創建項目

一、在上述練習文件夾中建立一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令能夠自動建立這個package.json文件jquery

npm init -y

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。webpack

二、在當前目錄下安裝 webpackweb

// 本地安裝Webpack
npm install --save-dev webpack

三、回到以前的空文件夾，並在裏面建立兩個文件夾,src文件夾和build文件夾，src文件夾用來存放咱們將寫的JavaScript模塊，build文件夾用來存放準備給瀏覽器讀取的數據（包括使用webpack生成的打包後的js文件以及一個index.html文件）。shell

在這裏還須要建立三個文件，index.html 文件放在build文件夾中，一個js文件example.js此時項目結構以下圖所示npm

node_modules 文件夾
src 文件夾
    example.js
bulid 文件夾
    index.html
package.json

index.html 文件，示例以下：json

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>webpack example</title>
  </head>
  <body>
  <script src="./bundle.js"></script> <!-- bundle.js爲以後打包後輸出的文件 -->
  </body>
  </html>

example.js文件，示例以下：
```shell
//安裝babel後客使用ES6的模塊定義和渲染並返回一個React組件
import React, { Component } from 'react' //react導入
import ReactDOM from 'react-dom'
import json from './test.json'
import './style.css' //css導入
import img from './producticon.png'//圖片導入
import img2 from './images/a.gif'

class App extends Component {
render() {
return (

{json.text}

Example11111111111

)
}
}

ReactDOM.render( , document.getElementById('root'));
```

4、WebPack 配置

一、基礎配置

單頁面應用裏，項目一般會有一個入口（entry）文件，假設是 example.js，咱們經過配置 webpack 來指明它的位置。

首先，在項目根目錄新建一個 webpack.config.js，這是 webpack 默認的配置文件名稱，添加如下內容：

module.exports = {
    entry: '../src/example.js'  // 演示單入口文件
    output: {
        path: __dirname,      // 打包後輸出文件的保存路徑
        filename: 'bundle.js' // 打包後輸出文件的名稱
    }
}
//"__dirname"是Node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

因爲配置了webpack的webpack.config.js配置文件，如今咱們可使用webpack命令來打包文件

webpack

咱們的根目錄下會多出一個bundle.js文件。

二、本地服務器配置

安裝webpack-dev-server

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

添加本地服務器配置

module.exports = {
    entry: '../src/example.js' 
    output: {
        path: __dirname,      
        filename: 'bundle.js' 
    }
}
//本地服務器配置
devServer: {
    contentBase: "./build",//本地服務器所加載的頁面所在的目錄
    port: 8888,
    colors: true,//終端中輸出結果爲彩色
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  }

webpack-dev-server 提供了兩種模式用於自動刷新頁面：

iframe 模式

咱們不訪問 http://localhost:8080，而是訪問 http://localhost:8080/webpack-dev-server/index.html

inline 模式

在命令行中指定該模式，webpack-dev-server --inline。這樣 http://localhost:8080/index.html 頁面就會在 js 文件變化後自動刷新了。

以上說的兩個頁面自動刷新的模式都是指刷新整個頁面，至關於點擊了瀏覽器的刷新按鈕。

webpack-dev-server 還提供了一種 --hot 模式，屬於較高階的應用。

三、快捷命令

npm能夠引導任務執行，對其進行配置後可使用簡單的npm build命令來代替這些繁瑣的命令。在package.json中對npm的腳本部分進行相關設置便可，設置方法以下。
shell { "name": "lesson-3", "version": "1.0.0", "description": "", "main": "src/example.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "compile": "babel src/example.js -o example.compiled.js", "run": "babel-node src/example.js", "build": "webpack",//在這裏~~ "build-watch": "webpack --w --color", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.18.0", "babel-loader": "^6.2.8", "babel-polyfill": "^6.16.0", "babel-preset-latest": "^6.16.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", "css-loader": "^0.26.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "html-webpack-plugin": "^2.24.1", "json-loader": "^0.5.4", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }, "dependencies": { "react": "^15.4.0", "react-dom": "^15.4.0" } } 注：package.json中的腳本部分已經默認在命令前添加了node_modules/.bin路徑，因此不管是全局仍是局部安裝的Webpack，你都不須要寫前面那指明詳細的路徑了。
npm的start是一個特殊的腳本名稱，它的特殊性表如今，在命令行中使用npm start就能夠執行相關命令，若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用npm run {script name}如npm run build。

5、Webpack的強大功能——生成Source Maps（使調試更容易）

經過簡單的配置後，Webpack在打包時能夠爲咱們生成的source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。
在webpack的配置文件中配置source maps，須要配置devtool，它有如下四種不一樣的配置選項，各具優缺點，描述以下：

devtool選項配置結果

一、source-map 在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包文件的構建速度；

二、cheap-module-source-map 在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升項目構建速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

三、eval-source-map 使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。不過在開發階段這是一個很是好的選項，可是在生產階段必定不要用這個選項；

四、cheap-module-eval-source-map 這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

module.exports = {
    entry: '../src/example.js' 
    output: {
        path: __dirname,      
        filename: 'bundle.js' 
    },
    devtool: 'eval-source-map'//配置生成Source Maps，選擇合適的選項
}

5、Loaders

經過使用不一樣的loader，webpack經過調用外部的腳本或工具能夠對各類各樣的格式的文件進行處理，好比說分析JSON文件並把它轉換爲JavaScript文件，或者說把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器能夠識別的JS文件。或者說對React的開發而言，合適的Loaders能夠把React的JSX文件轉換爲JS文件。
安裝jsonloader

//json loader
npm install json-loader --save-dev

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

module.exports = {
  entry: "./src/example.js",
  output: {
    path: "./build",
    filename: "bundle.js"
  },
  devtool: "eval-source-map",
  module: {//在配置文件裏添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
       {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',//babel
        query: {
          presets: ['es2015','react']
        }
      },
      {//添加css loader
        test: /\.css$/,
        //loader: 'style!css'//添加對樣式表的處理，感嘆號的做用在於使同一文件可以使用不一樣類型的loader
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url?limit=8192" //只有不大於8kb的圖片纔會打包處理成Base64的圖片
      },
    ]
  },
  devServer: {
    contentBase: "./build",//本地服務器所加載的頁面所在的目錄
    port: 8888,
    colors: true,//終端中輸出結果爲彩色
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  }
};

6、插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

//安裝jquery
npm install jquery --save

//example.js中引用
import $ from 'jquery'

還能夠安裝其餘的插件，並配置在webpack.config.js中，例如：

//webpack.config.js增長
plugins: [
    //new webpack.optimize.CommonsChunkPlugin('common.js'),
    new ExtractTextPlugin("[name].css", {allChunks: true}) // allChunks=true 全部獨立樣式打包成一個css文件
  ],

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。