如何使用webpack

npm init -y
npm install webapck webpack-cli --save-dev
touch webpack.config.js

在webpack.config.js中下面添加內(nèi)容

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
  filename: 'main.js',
  path: path.resolve(__dirname, 'dist')
 }
};

• entry：工程資源的入口，可以是單個(gè)文件，也可以是多個(gè)文件，通過每一個(gè)資源入口，webpack會(huì)一次去尋找它的依賴進(jìn)行模塊打包。我們可以把entry理解為整個(gè)依賴樹的根，每個(gè)入口都將對(duì)應(yīng)一個(gè)最終生成的打包結(jié)果。
• output：這是一個(gè)配置對(duì)象，通過它我們可以對(duì)最終打包的產(chǎn)物進(jìn)行配置，這里配置了兩個(gè)屬性，：
  • path：打包資源放置的路勁，必須為絕對(duì)路徑。
  • filename：打包結(jié)果的文件名。

定義好配置文件后，用npx webpack或者./node_modules/.bin/webpack執(zhí)行

使用loader

項(xiàng)目中需要引入一個(gè)css文件，如果直接用webpack去執(zhí)行就會(huì)報(bào)錯(cuò)，需要再webpack中加入loader機(jī)制

module.exports = {
  ...
  module: {
    rules: [
      {
        // 用正則去匹配 .css 結(jié)尾的文件，然后需要使用 loader 進(jìn)行轉(zhuǎn)換
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

編譯之前還需要安裝style-loader和css-loader

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

注意：

use屬性的值是一個(gè)使用loader名稱組成的數(shù)組，loader執(zhí)行的順序是從后往前的，由于loader執(zhí)行有順序，故不能寫成這樣

use: ['css-loader', 'style-loader']

每個(gè)loader都可以通過URL queryString的方式傳入?yún)?shù)，比如'css-loader?url'

style-loader的原理：是將css的內(nèi)容使用javascript的字符串存儲(chǔ)起來，在網(wǎng)頁執(zhí)行javascript時(shí)通過DOM操作，動(dòng)態(tài)地向HTML head標(biāo)簽里插入HTML style標(biāo)簽。

配置loader的方式也可以用Object來實(shí)現(xiàn)

use: ['style-loader', {
  loader: 'css-loader',
  options: {
    url: true
  }
}]

使用plugin

loader的作用是被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)，插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)節(jié)中的變量。

如果想要使用一個(gè)插件，我們只需要require()它，然后把它添加到plugins數(shù)組中。我們可以在一個(gè)配置文件中因?yàn)椴煌哪康亩啻问褂糜靡粋€(gè)插件，因此我們可以使用new操作符來創(chuàng)建它的實(shí)列。

上面使用loader把css加載到j(luò)s中去，現(xiàn)在使用extract-text-webpack-plugin插件把bundle.js文件里的css提取到單獨(dú)的文件中

// 提取 css 的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module: {
  rules: [
    {
      // 用正則去匹配 .css 結(jié)尾的文件，然后需要使用 loader 進(jìn)行轉(zhuǎn)換
      test: /\.css$/,
      loaders: ExtractTextPlugin.extract({
        //轉(zhuǎn)換 .css需要使用的 loader
        use: ['css-loader']
      })
    }
  ]
},
plugins: [
  //從 js 文件中提取出來的 .css 文件名稱
  new ExtractTextPlugin({
    filename: 'main.css'
  })
]

編譯之前需要安裝extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin

執(zhí)行webpack時(shí)報(bào)錯(cuò)需要這樣安裝

npm install extract-text-webpack-plugin@next

DevServer

官方網(wǎng)站

安裝

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

然后進(jìn)行簡單的配置

devServer:{
  port: 3000,
  publicPath: "/dist"
}

然后用./node_modules/.bin/webpack-dev-server執(zhí)行

資源壓縮

npm i uglifyJSPlugin-webpack-plugin --save-dev

配置文件

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
plugins: [
  new UglifyJSPlugin({
    //默認(rèn)是 false 需要手動(dòng)開啟
    parallel: true
  })
]

或者

optimization: {
  minimizer: [new UglifyJsPlugin()],
},

按需加載

在代碼層面，webpack支持兩種方式進(jìn)行異步模塊加載，一種是CommonJS形式的require.ensure，一種是ES6 Module形式的異步import()

異步加載的腳本不允許使用document.write，所以將module.js的代碼改成console.log

export const log = function(){
  console.log('module.js loaded.')
}

編輯app.js，將module.js以異步的形式加載進(jìn)來

import('./module.js').then(module =>{
  module.log()
}).catch(error => "An error occurred while loading the module")
document.write('app.js loaded.')

修改配置

module.exports = {
  mode: "production",
  entry: './app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "./dist"
  },
}

這里我們?cè)趏utput中添加了一個(gè)配置項(xiàng)publicPath，它是webpack中一個(gè)很重要有很容易引起迷惑的配置，當(dāng)我們的工程中有按需加載以及圖片和文件等外部資源時(shí)，就需要它來配置這些資源的路徑，否則頁面上就會(huì)報(bào)404，這里我們將publicPath配置為相對(duì)于html的路徑，使按需加載的資源生產(chǎn)在dist目錄下，并且能正確地引用到它。

重新打包之后你會(huì)發(fā)現(xiàn)打包結(jié)果中多出一個(gè)1.mian.js，這里面就是將來會(huì)被異步加載進(jìn)來的內(nèi)容。刷新頁面并查看chrome的network標(biāo)簽，可以看到頁面會(huì)請(qǐng)求1.main.js。它并不來源于index.html中的引用，而是通過main.js在頁面插入了script標(biāo)簽來將其引入的。

使用webpack的構(gòu)建特性

從2.0.0版本開始，webpack開始加入了更多的可以優(yōu)化構(gòu)建過程的特性。

tree-shaking

在關(guān)于模塊的那一篇文章中我們提到過，ES6 Module的模塊依賴解析是在代碼靜態(tài)分析過程中進(jìn)行的。換句話說，它可以在代碼的編譯過程中得到依賴樹，而非運(yùn)行時(shí)。利用這一點(diǎn)webpack提供tree-shaking功能，它可以幫助我們檢測(cè)工程中哪些模塊有從未被引用到的代碼，這些代碼不可能被執(zhí)行到，因此也稱為“死代碼”。通過tree-shaking，webpack可以在打包過程中去掉這些死代碼來減小最終的資源體積。

開啟tree-shaking特性很簡單，只要保證模塊遵循ES6 Module的形式定義即可，這意味著之前所有我們的例子其實(shí)都是默認(rèn)已經(jīng)開啟了的。但是要注意如果在配置中使用了babel-preset-es2015或者babel-preset-env，則需要將其模塊依賴解析的特性關(guān)掉，如：

presets: [
  [env, {module: false}]
] 

這里我們測(cè)試一下tree-shaking的功能，編輯module.js:

// module.js 
export const log = function() { 
  console.log('module.js loaded.'); 
} 

export const unusedFunc = function() { 
  console.log('not used'); 
} 

打開頁面查看1.main.js的內(nèi)容，應(yīng)該可以發(fā)現(xiàn)unusedFunc的代碼是不存在的，因?yàn)樗鼪]有被別的模塊使用，屬于死代碼，在tree-shaking的過程中被優(yōu)化掉了。

tree-shaking最終的效果依賴于實(shí)際工程的代碼本身，在我對(duì)于實(shí)際工程的測(cè)試中，一般可以將最終的體積減小3%~5%?？傮w來看，我認(rèn)為如果要使tree-shaking發(fā)揮真正的效果還要等幾年的時(shí)間，因?yàn)楝F(xiàn)在大多數(shù)的npm模塊還是在使用CommonJS，因此享受不了這個(gè)特性帶來的優(yōu)勢(shì)。

scope-hoisting

scope-hoisting（作用域提升）是由webpack3提供的特性。在大型的工程中模塊引用的層級(jí)往往較深，這會(huì)產(chǎn)生比較長的引用鏈。scope-hoisting可以將這種縱深的引用鏈拍平，使得模塊本身和其引用的其它模塊作用域處于同級(jí)。這樣的話可以去掉一部分 webpack的附加代碼，減小資源體積，同時(shí)可以提升代碼的執(zhí)行效率。

目前如果要開啟scope-hoisting，需要引入它的一個(gè)內(nèi)部插件：

module.exports = { 
  plugins: [ 
    new webpack.optimize.ModuleConcatenationPlugin() 
  ] 
}

scope-hoisting生效后會(huì)在bundle.js中看到類似下面的內(nèi)容，你會(huì)發(fā)現(xiàn)log 的定義和調(diào)用是在同一個(gè)作用域下了：

// CONCATENATED MODULE: ./module.js 
const log = function() { 
  console.log('module.js loaded.'); 
} 

// CONCATENATED MODULE: ./app.js 
log();

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論