webpack：（模塊打包機）

webpack    https://www.webpackjs.com/

　　學webpack就靠記憶、英文（報錯都是英文的，掛就掛在一報錯就懵圈） 報錯了就多翻譯，多報幾回就會了 將來的Vue或者React都的用它

模塊化開發：

　　無論下面3個有多大區別，核心點：就是他們如何作到的模塊化方式。

　　簡單點:如何導出，如何引入。

CommonJS node就遵循這套規範

　　module.exports 導出

　　require（） 引入

CommonJS規定，每個JS都是單獨的模塊（模塊是私有的：裏面涉及的值、變量以及函數等都是私有的，和其它JS文件中的內容不衝突）

特色：

　　1. 全部代碼都運行在模塊做用域，不會污染全局做用域（每個模塊都是私有的，包括裏面全部的東西都是私有的）

　　2. 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，由於第一次加載的時候緩存了。若是想屢次調用，必須清理緩存。（爲了保證性能，減小模塊代碼重複執行的次數）

　　3. 模塊加載順序時按照其在代碼中出現的順序。CommonJS是同步操做

AMD require.js

　　 Asynchronous Module Definition，即異步模塊加載機制

CMD sea.js

　　 CMD(Common Module Definition)表示通用模塊定義

ES6模塊化  

　　import {fn} from './xx.js'; 引入模塊

　　 　　//xx.js

　　 export function fn(){} 導出模塊

　　　　 // 寫法一  export var m = 1

　　　　 // 寫法二  var m = 1; export {m}

　　　　 // 寫法三  var n = 1; export {n as m};

　　 export function fn( ){ } 導出模塊

---

 

/***************************下面正是進入 webpack*************** 2018-12-25***************/

 webpack能夠看作是模塊打包機，它作的事情是分析你的項目結構。

找到js模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等）。

並將打包爲適合的格式以供瀏覽器使用。

　　1.代碼轉換：ts編譯成js，把scss編譯爲css

　　2.文件優化：壓縮js，css，html代碼，壓縮合並圖片等 　　

　　3.代碼分割：提取多個頁面的公關代碼，提取首屏不須要的執行部分的代碼讓其異步加載

　　4.模塊合併：在採用模塊化的項目了會有不少個模塊和文件，須要構建功能把功能模塊分類合併成一個文件

　　5.自動刷新：監聽本地源代碼的變化。自動從新構建刷新瀏覽器

快速上手：

　　1.初始化項目（取名字的時候必定不要取工具的名字） npm init -y

　　2.安裝webpack：(npm i webpack webpack-cli -D)

　　　　在全局安裝：

　　　　　　npm i webpack -g 不建議。

　　　　建議在本地安裝：

　　　　　　npm install webpack -save-dev

　　　　　　npm i webpack-cli -D

　　　　　　簡寫：npm i webpack -D

　　　　開發依賴：有些配置開發的時候使用，到了線上就不使用了

　　　　項目依賴：打包後上線須要的依賴 npm i xx -S

　　3.手動建立 webpack.config.js 文件

　　4.入口、出口、模塊、插件

　　　　在package.json文件裏"scripts"對象裏寫入"build":"webpack"。

　　　　npm run build （build，是本身起的要建立的文件夾的名字

       5. 安裝 npm i html-webpack-plugin -D

英文儲備：

path：  路徑           

resolve：決心、分解、下決定

dirname：  目錄名

filename：  文件名

mode  方式

developments： 發展、新產品development的複詞

entry：  入口

output：  輸出

plugins：  外掛

template：  樣板、模板

chunk：  大塊、厚厚的一塊

module：  模塊

exports：  出口

collapse：  崩潰、坍塌

whitespace：  空白符     white： 白     space：太空、空間、空白

removeAttributeQuotes：  去掉屬性的引號    attribute：認爲...是、把...認爲   quote：報價; 引述; 引用

minify：  縮小  （這裏能夠理解爲壓縮）

參考代碼--語法：

let path = require('path')
module.exports = {
    mode:'development',//要配置mode：development （開發依賴）  mode：production （生產依賴）
    entry:'./c.js',//入口文件,去解析某個（些）指定的文件，最終編譯成瀏覽器可使用的文件
    output:{ //出口
        path:path.resolve(__dirname,'build'),//把出口文件放在當前目中一個叫build的文件夾裏（path：路徑，__dirname：目錄名）
        filename:'c.js',
    },  
}

 

let path = require('path')
/*
下載、引入html-webpack-plugin的插件
*/
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
module.exports = {
    mode:'development',//要配置mode：development （開發依賴）  mode：production （生產依賴）
    entry:{//['./c.js','e./js'],//入口文件,去解析某個（些）指定的文件，最終編譯成瀏覽器可使用的文件（entry：能夠是字符串、數組、對象）
        cc:'./c.js',
        ee:'./e.js'
    },
       
    output:{ //出口
        path:path.resolve(__dirname,'build'),//把出口文件放在當前目中一個叫build的文件夾裏（path：路徑，__dirname：目錄名）
        filename:'[name].[hash:5]js',//出口文件的文件名,[hash]給文件名添加一個編碼。 :5讓編碼變成5位數。
    },
    plugins:[
        new HWP({
            filename:'index.html',//編譯後的文件名,不寫這句話默認是index.html
            template:'./1_webpack前夕.html',//以哪一個html爲模板
            chunks:['cc','ee']
        })
    ]
}

const path = require('path');
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
/*
entry:
    字符串  './c.js'
    數組    ['./c.js','./e.js']
    對象     {cc:'./c.js',ee:'./e.js'}
*/
let obj = {
    mode:'development', //方式
    entry:['./c.js'],  //入口
    output:{ //輸出
        path:path.resolve(__dirname,'build'),
        filename:'wmm.js'
    },
    plugins:[  //外掛
        new HWP({
            template:'./1_webpack前夕.html'
        })
    ]
}
module.exports = obj;  //module.exports 模塊.出口

const path = require('path');
const HWP = require('html-webpack-plugin');
let obj = {
    mode:'development',
    entry:{
        cc:'./c.js',
        ee:'./e.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].js',
    },
    plugins:[
        new HWP({
            template:'./1_webpack前夕.html',
            chunks:['cc'],
            filename:'index.html',
        }),
        new HWP({
            template:'./2_webpack.html',
            filename:'index2.html',
            chunks:['ee']
        })
    ]
}
module.exports = obj;

const path = require('path');
const HWP = require('html-webpack-plugin'); // npm i html-webpack-plugin -D
let obj = {
    mode:'development',
    entry:{
        cc:'./c.js',
        ee:'./e.js'
    },
    output:{
        path:path.resolve(__dirname,'build'),
        filename:'[name].[hash:5].js'
    },
    plugins:[
        new HWP({
           template:'./1_webpack前夕.html',
           chunks:['cc','ee'],
           filename:'index.html',
           minify: {
                removeAttributeQuotes:true,//去掉屬性的引號
                collapseWhitespace:true //html壓縮一行
            },
        })
    ]
}
module.exports = obj;