模塊化管理工具兼打包工具 webpack

時間 2019-11-16

標籤模塊化管理工具打包 webpack 简体版

原文原文鏈接

webpack

是一個【模塊化管理工具】兼【打包工具】
是一個工具(和seajs,requirejs管理前端模塊的方式是不同)
在webpack一個文件就是一個模塊!
seajs,requirejs
- 模塊化!
webpack也能對前端資源進行模塊化管理!
- 不是某個要在頁面引入的js文件
- 是一個工具
- webpack容許咱們在前端代碼像node代碼同樣去引入一個包(文件)
- webpack會把咱們寫的相似node的模塊化方式，作轉換，使其餘可以以瀏覽器中運行
- module.exports = '小明' // xx.js
- require('./xx.js') // a.js

安裝webpack

npm install -g webpack
- 帶-g參數表示全局安裝!
經過webpack來管理咱們的代碼，那麼咱們的代碼通常是不會暴露到全局的!

基本使用

咱們在前端代碼像使用node代碼同樣用module.exports及require來管理(描述)模塊的依賴關係,
可是這樣的代碼是不能直接在瀏覽器中運行的

var myjack = require('./jack.js')
    var myrose = require('./rose.js')
    console.log(myjack.money)

咱們須要使用webapck來管理(轉換)咱們的代碼,使其符合瀏覽器的規則!
- webpack <入口文件名> <輸出文件名>
- webpack會把咱們在代碼所依賴的文件(經過require獲取的文件)合併到一塊兒!
- 而且【不會產生全局變量】(除非顯示的經過window點一個屬性)

經過配置文件的方式使用webpack

在項目目錄添加:webpack.config.js文件
在文件中添加如下內容

// 這是webpack的配置文件
   // 每次修改完或着新增，都要從新編譯，敲得代碼太長，因此模塊化一下
// 要求在這個文件中暴露一個對象，按照node 的請求去寫就行啦

    module.exports = {
      // 這個屬性代表，整個項目的入口文件是誰
      entry:'./src/app.js',
      // 這個屬性表示，咱們項目經過webpack打包後的輸出文件及輸出路徑
      output:{
        filename:'./dist/bundle.js' // 指定輸出的文件名
      }
    }

直接在當前目錄的命令行，執行命令：webpack就能夠了!

將css也合併到js代碼中

css-loader 和 style-loader

css-loader,把css合併到js中(沒有添加dom操做，也就是沒把css添加到頁面中)
+npm install css-loader --save-dev
style-loader,把css-loader處理的結果添加到頁面(dom)中
+npm install style-loader@0.13.1 --save-dev
+注意：這裏的命令必定要指定版本號，不然出錯

output:{
    filename:'./dist/bundle.js' // 指定輸出的文件名
  },
  module:{
    loaders:[ // Loaders是提供了一些特定的功能
        {
          // 代表咱們(用到的loader)要處理的文件是什麼
          test:/\.css$/,  // 要把指定的css加入到js中

          // loader屬性指定具體的loader,這個loader實際上是一個npm外
          // css-loader就是一個npm 包！
          // `npm install css-loader --save-dev`
          // css-loader只是把css代碼加入到js代碼（並沒把樣式添加到dom中）
          // style-loader 這個loader這爲了把css-loader獲得css樣式添加到dom中
          // 
          // webpack會先調用!右邊的包來處理咱們的文件，而後把!右邊處理的結果交給左邊的包來處理!
          loader:'style-loader!css-loader'
        }
    ]
  }

less-loader

做用: 這個loader會讀取匹配的less文件，而後把less文件內容轉換爲css內容
通常會配合css-loader 和 style-loader一塊兒使用!
注意，下載less-loader會缺乏一個less包：npm install less --save-dev，這個須要另外單獨安裝!

require('./xxx.less') // 用到的less文件要引入才能生效！

module.exports = {
  entry: './src/app.js',
  output:{
    filename:'./dist/bundle.js'
  },
  module:{
    loaders:[
       {
         test: /\.less$/ ,// 匹配當前loader要處理的文件
         // less-loader做用:是讀取test規則對應的文件，而後把讀取到的less文件內容轉換爲css內容
        loader:'style-loader!css-loader!less-loader'
       }
    ]
  }
}

sass-loader

安裝: npm install sass-loader --save
做用：這個loader會讀取匹配的scss文件，而後把less文件內容轉換爲css內容
注意,sass-loader的依賴包node-sass和webpack不會自動安裝上
須要手動安裝:npm install node-sass webpack --save-dev

url-loader

做用: 是能css中使用的圖片進行處理，若是圖片比指定的條件小，就轉換爲base64
若是比指定的條件大就不轉換
注意，安裝時會缺乏一個file-loader包:npm install file-loader --save-dev
- 這個file-loader裏會對文件操做!
css: bg:url()
在css中有好小圖標,可能有100個，瀏覽器會再發100個請求!
若是可以把這個100個請求合成1個，或者0個就更好了!
注意：只可以處理css的圖片，爲何要處理css的圖片呢，由於css圖片更多的時候是圖標，而html中
直接寫一個img的話，通常圖片是比較大的，不須要轉換爲base64，轉換的話反而得不償失，若是是html
圖片的話，咱們用的是懶加載來解決問題

// base64javascript

module.exports = {
  // 指定入口文件
  entry:'./src/app.js',
  output:{
    path:'dist',// path指定父目錄，webpack會把path與filename拼接成一個路徑 
    // 同時是指定默認文件的生成目錄 
    filename:'bundle.js'
  },
  module:{
    loaders:[
         // 這裏要分開寫，寫兩個loader,由於他們用法不同，一個用來css語法轉換，
          // 一個用來css裏面的圖片轉換
      {
          test: /\.css$/,
          loader:'style-loader!css-loader',// 從右往左執行!
      },
      {
        test:/\.(jpg|jpeg)/,
        // 這裏的./是相對於path屬性指定的目錄
        // name參數指定若是不生成base64時，文件的輸出目錄及輸出的文件
        // [name]表示原文件名,[ext]表示源文件擴展名
        // 若是不指定name參數，輸入的圖片名是隨機的

        // limit: 限制轉換的大小
        // 值的單位是字節,byte
        // 1byte = 8bit (位)  字節
        // 1kb = 1024 字節
        // 1M = 1024kb
        // 1000
        loader:'url-loader?limit=12048&name=./img/[name].[ext]'
      }
    ]
  }
}

babel-loader

babel-loader依賴於babel這個工具!，是在webpack中使用的,能夠進行多種語法轉換!
- babel是獨立的一款工具，能夠用來進行多種語法轉換，
- 補充：在瀏覽器直接引入Browser.js也能夠進行語法轉換，可是轉換性能比較低一些
寫代碼時，用es6，在寫完以後，再用工具轉換爲es5（爲何要寫es6呢，由於我想體驗es6的簡潔寫法，
那爲何又要轉換爲es5呢，由於瀏覽器的兼容性問題）css
安裝npm install babel-loader --save-dev
*注意：安裝時還須要安裝babel-core，:
npm install babel-core@6.0.0 webpack --save-dev* 你也能夠根據提示，看看提示你缺什麼，你就安裝什麼
具體版本號，看提示
若是是對es6進行請求轉換，還須要安裝:
npm install babel-preset-es2015 --save-devhtml

// 最終這個配置文件 是由node去解析

const path = require('path')   //須要引入path模塊
const webpack = require('webpack')

module.exports = {
  // 入口文件目錄
  // 由於咱們要分開打包，因此不止一個入口
  entry:{
    // 在這裏寫路徑的時候推薦把絕對路徑也寫上，把路徑完整地寫上來
    // 在任何模塊文件內部，可使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑
    app:path.join(__dirname, 'src/app.js'),

    // 隨便寫一個屬性，值爲數組，數組中的元素是咱們但願單獨打包的第三方包的名字
    vender001:['angular']
  },

  // 輸入路徑 
  output:{
    // 輸出的文件目錄
    path: path.join(__dirname, 'dist'),
    // 輸出的文件名(也就是打包後的文件)
    filename:'bundle.js'
  },
  module:{
    // 這裏是咱們webpack打包用到的loaders
    loaders:[
       {
        test:/\.js$/,
        // 也須要一些參數，babel不只僅是能轉換es6，還能將react的語法轉換成js，
        // 因此咱們要經過query這個屬性來指定一下轉化爲那種
        loader:'babel-loader',
        query:{
          // 這個es2015也是對應了一個npm 包
          // npm install babel-preset-es2015 --save-dev
          presets:['es2015']   //這個presets是babel裏面的一個屬性
        }
       }
    ]
  }
}

對第三方包進行分離

這個分離不是必須的
把咱們項目用到的包(若是有第三方包，咱們分打包合併!)
一個能夠利用瀏覽器緩存對第三方包進行緩存!
其實就是咱們本身寫的文件打一個包，其餘第三方我文件打一個包!

// 入口文件目錄
  entry:{

    app:path.join(__dirname, 'src/app.js'),

    // 隨便寫一個屬性，值爲數組，數據中的元素是咱們但願單獨打包的第三方包的名字
    vender001:['angular']
  },

  // 輸入路徑 
  output:{
    // 輸出的文件目錄
    path: path.join(__dirname, 'dist'),
    // 輸出的文件名(也就是打包後的文件)
    filename:'bundle.js'
  },
    // 這個屬性裏寫上webpack中要使用到的插件
  plugins:[
    // 要使用webpack自的插件來分離第三方包
    new webpack.optimize.CommonsChunkPlugin(
      // 第一個參數，就是咱們在entry寫的一個屬性名
      // webpack會自動讀取對應的值，找到相應的包
      'vender001',
      // 第二個參數，是第三方包單獨打包後生成的文件名
      'vender.js'
    )
  ]

webpack 插件

自動打開瀏覽器插件(open-browser-webpack-plugin)

github地址

建立index.html插件(html-webpack-plugin)

github地址

// npm install html-webpack-plugin --save-dev
 const  HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
  new HtmlWebpackPlugin({
    template:'./src/index.html'  // 指定模板,最終生成的html會生成到path屬性對應的位置
  })
  ]