webpack安裝與核心概念

• 安裝webpack
• webpack核心概念：入口、輸出、加載器、插件、模塊、模式

 1、安裝webpack

1.安裝webpack以前須要安裝nodejs環境，在使用nodejs環境自帶的包管理工具npm進行下載，因爲網絡環境問題，建議安裝先安裝淘寶的鏡像cnpm來實現下載。

npm install webpack -g

因爲webpack從3版本升級到4版本，拆分了命令行接口webpack-cli，因此這時候你直接使用webpack會報錯，還須要下載安裝一個webpack-cli，再使用webpack。

npm install webpack-cli -g

而後就能夠開始再你的工做區間使用webpack了，須要注意的是在你的工具區間內必需要有src文件夾，而且在文件下面有個index.js文件，這是針對無配置的測試狀況，有配置的大神跳過。

webpack

經過webpack打包後會在工具區間下生成一個文件夾dist，而且文件夾下有一個main.js，這個main.js是由webpack打包生成的，在HTML結構文件中引入這個main.js測試你的代碼。

 

2.在webpack中默認支持ES6模塊化和Commonjs模塊化，而且能夠同時混合使用。看下面示例：（同時演示經過webpack指定打包文件且指定打包到某個文件）

使用ES6的模塊化定義一個sum.js

export default function sum(a,b){
    return a + b;
}

使用Commonjs模塊化定義一個minus.js

module.exports = function(a,b){
    return a - b;
}

在demo.js主入口文件引入這兩個模塊，並使用模塊的功能：

import sum from './sum';
var minus = require('./minus');
console.log(sum(2,4),minus(4,2));

而後經過webpack將demo.js打包到bundle.js文件中：

webpack demo.js -o bundle.js

再在demo.html結構文件中引入打包後的bundle.js文件。

<script src="./bundle.js"></script>

打開demo.html文件，查看控制檯，操做成功的話會打印出：6 2

 

3.爲了更方便管理項目，除了在全局安裝webpack之外有必要在當前項目的工做區間上安裝一個局部的webpack，一是可能全局的webpack的版本可能與全局的版本不一樣，而是能夠更好的管理插件。

//下載安裝局部的webpack----(--save-dev能夠簡寫成-D)
cnpm install webpack --save-dev

下載安裝完成之後在工做區間下能夠看到生成了一個node_modules文件夾，還有生成一個package.json文件。node_nodules文件夾裏面是webpack依賴的包，package.json則是記錄當前工做區間都安裝了哪些包，第一次安裝在這個文件裏只記錄了webpack的信息，如：

{
  "devDependencies": {
    "webpack": "^4.35.0"
  }
}

好比再在當前工做區間上安裝一個jquery:

cnpm install jquery -D

package.json的記錄多出了一個jquery的信息，實際jquery包被存到了node_modules文件夾下：

{
  "devDependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.35.0"
  }
}

這個package.json文件有什麼做用呢？除了能夠查看項目依賴的包之外，還有當你要遷移你的工做區間或者向同事拷貝一個正在進行開發維護的項目時，並不須要將node_modules的包拷貝給他，只須要將這個package.json文件拷貝一份便可，拿到這個package.json後在新的工做區間上執行如下指令，就能夠將package.json文件中記錄的全部依賴包前部下載到當前工做區間上：

npm install

 2、webpack核心概念

• 入口（entry）
• 輸出（output）
• 加載器（loader）
• 插件（plugins）
• 模式（mode）
• 模塊

webpack中文文檔

首先，在工做區間建立一個後綴爲.config.js的配置文件,這個配置文件用來配置入口、輸出、加載器、插件、模塊、模式。意思就是由這個配置文件告訴webpack從那個文件開始打包操做，打包到那個文件，非JS文件如何編譯轉碼等操做，當打包JS文件時遇到須要依賴的模塊時根據配置的模塊信息進行打包操做，是按照開發模式仍是按照生產模式打包。這個配置文件都將爲你自動完成這些操做。注意.config.js配置文件遵循Commonjs規範。

入口(entry)

 2.1.1在config.js配置文件中配置單入口文件：在配置模塊中定義entry屬性，而後將入口文件路徑以字符串的方式傳入，注意這裏須要文件後綴。

module.exports = {
    entry:'./src/index.js'
}

2.1.2在config.js配置文件中配置多個入口文件：entry屬性這時候就要寫成對象值了，而後給每一個入口文件定義一個名稱做爲該對象的屬性名，而後將對應的入口文件路徑做爲屬性值給該屬性。

1 module.exports = {
2     entry:{
3         index:'./src/index.js',
4         app:'./src/app.js'
5     }
6 }

輸出(output)

2.2.1在config.js配置輸出文件信息：在配置模塊中定義output屬性，並給這個屬性賦值一個對象，對象中有兩個屬性分別是path和filename，path用來設置文件輸出路徑，filename用來設置文件名。

var path = require('path');
module.exports = {
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

注意path屬性的配置，path.resolve(__dirname,'dist')的意思就是在path這個變量上找到當前路徑下的‘dist’文件夾，若是當前文件夾下沒有‘dist’文件夾就會自動建立‘dist’文件夾。path自己是一個node環境模塊，因此須要引入這個模塊，而後在調用path的resolve()方法獲取當前模塊下指定的文件夾，這個方法會返回該文件夾的絕對路徑。交給webpack用來操做輸出文件。

因此，這個輸出的意思就是將打包好的文件存儲到當前工做環境下的dist文件夾下，並設置這個打包好的文件名稱爲bundle.js。

2.2.2有了入口文件的的配置模式，必然輸出也就須要針對這種多入口文件對應的輸出多個打包文件，因此文件名確定不能像上面同樣寫死，看示例怎麼解決的：

1 var path = require('path');
2 module.exports = {
3     output:{
4         path:path.resolve(__dirname,'dist'),
5         filename:'[name].bundle.js'
6     }
7 }

在固定的文件名稱前面加上一個塊[name]，設置爲動態命名，這個那麼就是入口文件路徑對應屬性名的名稱。

加載器(loader)

咱們知道，less是不能直接做用在HTML文件上的，在webpack打包過程當中能夠直接經過加載器將less轉換成css文件，甚至直接轉換編譯成行間樣式，這時候就須要用到加載器。固然加載器不僅是爲了實現less的轉換，還能處理各類不能直接被瀏覽器使用的文件格式的文件，好比TypeScript。

先經過轉換less文件來了解加載器：

1 module.exports = {
2     module:{
3         rules:[
4             {test: /\.less$/,use:['style-loader','css-loader','less-loader']}
5         ]
6     }
7 }

在配置文件中添加對象屬性module，而後在module中添加對象屬性rules，而後將各類須要解析的文件以及解析這個文件格式的loader以鍵值對的方式添加進去。文件類型用test表示，而後再以正則表達式的方式匹配文件後綴做爲test的值；use則用來表示須要的加載器，加載器的值能夠是一個字符串（執行單個加載器），也能夠是一個數組（多個加載器迭代加載），多個加載器迭代加載的方式是從後向前進行迭代加載。

要注意的是這些加載器是須要下載的，而後還要再主入口文件中使用模塊化依賴對應文件，否則webpack沒辦法追蹤到對應的文件。

cnpm install style-loader less-loader css-loader less --save-dev

在主入口文件中依賴對應的文件：

import './src/demo.less';

插件(plugins)

關於插件這部分不太可能在這裏解釋清楚，能夠理解爲擴展webpack的功能。其實webpack自帶的加載器loader也是創建在系統的plugins基礎之上的，既然是外部的擴展功能那就要先引入，而後再在配置中配置。實際上倒是是這樣的，咱們經過擴展一個html-webpack-plugin插件來示範如下，這裏不具體介紹這個插件的用途，後面會有具體剖析插件的博客來解析：

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

而後我再次執行webpack打包，若是正常的完成打包的話會在dist文件夾下出現一個index.html文件，可是我在打包環節出現瞭如下小錯誤：

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
具體在這裏不解釋這個錯誤的緣由了，我在控制檯中執行了這行命令解決了這個錯誤：

npm link webpack --save-dev

用cnpm也是能夠的，而後再次執行順利打包，dist文件夾出現了index.html文件。

模式(mode)

2.5.1模式是用來控制打包模式的，所謂打包模式一般被稱爲生產模式和開發模式，二者的區別就是生產模式是壓縮版本代碼，不方便測試，由於若是使用壓縮代碼測試的話，若是出現異常狀況報錯都是在第一行，不方便debug。在webpack中若是沒有設置模式就會默認爲生產模式，打包後的代碼是通過壓縮的。

module.exports = {
    mode:'production'//生產模式
    mode:'development'//開發模式
}

這個代碼你別兩個都複製了，我是爲了展現這兩個模式的設置方式把兩個模式都寫入了示例。在實際開發時咱們通常會須要兩個配置文件，一個用於開發打包，一個用於生產打包，在控制檯執行打包時採用指定的配置文件打包。