1，什么是webpack

webpack 本質(zhì)上來說，是一個(gè)現(xiàn)代js應(yīng)用的靜態(tài)模塊打包工具

重點(diǎn)：模塊，打包

模塊 :項(xiàng)目中會(huì)有很多的模塊化，便于開發(fā)但是webpack就是把項(xiàng)目中所有的不同模塊的js文件，打包成一個(gè)js文件，把所有不同模塊的css文件打包成一個(gè)css文件，同理，圖片一樣，同時(shí)會(huì)幫我們處理模塊間的各種依賴，整合打包
打包 :webpack打包時(shí)，會(huì)幫我們處理模塊間的各種依賴，整合打包成一個(gè)或者多個(gè)包，并且進(jìn)行資源處理，比如：壓縮圖片，將scss轉(zhuǎn)為css，將ES6轉(zhuǎn)為ES5語法等操作

image.png

gulp也可以打包（gulp 稱為前端自動(dòng)化任務(wù)管理工具）

使用情況
gulp: 當(dāng)項(xiàng)目工程模塊依賴比較簡(jiǎn)單，甚至沒有用到模塊化概念，只需要進(jìn)行簡(jiǎn)單的合并，壓縮，就使用gulp即可
webpack：項(xiàng)目使用模塊化管理，依賴非常強(qiáng)，要使用強(qiáng)大的webpack
區(qū)別
gulp: 更加強(qiáng)調(diào)的是前端流程的自動(dòng)化,模塊化不是它的核心
webpack：更加強(qiáng)調(diào)模塊化開發(fā)管理,而文件壓縮合并,預(yù)處理等功能,是它的附帶功能

附：將src下面的所有js文件轉(zhuǎn)為ES5的語法，最終輸出到dist文件夾中

image.png

2，webpackd的安裝

1，webpack是基于node.js安裝，node.js自帶軟件打包管理工具npm
2，安裝webpack(同時(shí)也要安裝 webpack-cli )

// 全局進(jìn)行安裝  操作指令：
cnpm install webpack webpack-cli -g

// 本地安裝開發(fā)者環(huán)境， 操作指令：
npm install webpack webpack-cli -save-dev

3，webpack的起步

1，安裝了webpack后，我們打包項(xiàng)目命令是：（webpack + 入口文件 + 出口文件 + 開發(fā)環(huán)境）

webpac ./src/index.js -o ./dist/bundle.js  --mode=development //  入口文件 + 出口文件 + 開發(fā)環(huán)境

2，配置文件

webpack
    dist ----打包好的文件放置的位置
    src ---資源文件夾
        index.js ---入口文件
        style.css ---樣式文件
        protype.js ---這里準(zhǔn)備了一個(gè)js文件，給vue原型上加一些函數(shù)
   index.html ---瀏覽器打開展示的首頁
   package.json ---通過npm init 生成的配置文件，npm包管理的文件
   webpack.config.js  --- 專門來配置文件的，webpack一些配置，都是在這個(gè)文件中進(jìn)行配置

3，最后在dist下生成了bundle.js文件，我們把這個(gè)js文件引入index.html文件中即可
4，如果每次使用webpack命令都要寫入口和出口作為參數(shù)，就比較麻煩，所以我們要在webpack.config.js配置好出口與入口，這樣我們每次使用webpack指令，就不需要寫出口與入口了，請(qǐng)看下面講解

4，webpack的配置

1，配置

//  絕對(duì)路徑需要引用的包
let path = require('path')
module.exports = {
    mode:"development", // 開發(fā)環(huán)境
    entry:"./src/index.js", // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 輸出文件名稱
        path:path.resolve(__dirname,'dist')  // 輸出的絕對(duì)路徑 ——> 這里就要引用 path
    }
}

2，操作:在html文件中引入打包好的js文件，運(yùn)行項(xiàng)目，就可以在瀏覽器中 看到打印出來的東西了
在項(xiàng)目中，我們會(huì)用到 一些樣式的引入，進(jìn)行配置，這樣打包時(shí)候，我們才能把引入的樣式給打包進(jìn)去，但是 webpack 默認(rèn)是不可以打包 css 文件的，這時(shí)就需要 loader 配置

5，webpack中用到的組件 loader 使用

1，因?yàn)檫@里會(huì)用到插件，所以我們要先安裝插件 loader

操作指令：npm install style-loader css-loader --save-dev

2，配置

let path = require('path')
module.exports = {
    mode:"development", // 開發(fā)環(huán)境
    entry:"./src/index.js",  // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 輸出文件名稱
        path:path.resolve(__dirname,'dist')  // 輸出的絕對(duì)路徑 ——> 這里就要引用 path
    },
    module:{ // loader 配置
        rules:[ // 對(duì)于某個(gè)格式的文件進(jìn)行轉(zhuǎn)換處理
            {
                test:/\.css$/,
                use:[ // use 數(shù)組中的 loader 的順序，是從下到上，逆序執(zhí)行
                    'style-loader', // 將js的樣式內(nèi)容插入到style標(biāo)簽中
                    'css-loader'  // 將css文件轉(zhuǎn)換為js
                ] 
            }
        ]
    }
}

引入打包好的文件，在控制臺(tái)，運(yùn)行起項(xiàng)目，即可
我們每次打包文件都要手動(dòng)引入文件，比較麻煩；所以安裝插件，在打包時(shí)，自動(dòng)完成html與js文件之間關(guān)系

6，plugin的使用

由于我們要自動(dòng)完成 html 與 js 文件之間的關(guān)系，所以這里的文件目錄也會(huì)改變

1，配置文件介紹

webpack2
    dist ----打包好的文件放置的位置
    src ---資源文件夾
        index.js ---入口文件
        style.css ---樣式文件
        protype.js ---這里準(zhǔn)備了一個(gè)js文件，給vue原型上加一些函數(shù)
        index.html ---瀏覽器打開展示的首頁
    package.json ---通過npm init 生成的配置文件，npm包管理的文件
    webpack.config.js  --- 專門來配置文件的，webpack一些配置，都是在這個(gè)文件中進(jìn)行配置

2，webpack 打包時(shí)候，我們要安裝 url-loader html-loader,所以我們要安裝此配置

操作指令：npm install url-loader html-loader --save-dev

3，配置

let path = require('path')
// a，安裝 html-webpack-plugin, 打包時(shí)候，我們要安裝此依賴，
// 操作執(zhí)行的命令：npm install html-webpack-plugin --save-dev，安裝時(shí)候，可能會(huì)影響到 loader 的插件，所以操作完后，還要 npm install
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development", // 開發(fā)中環(huán)境
    entry:"./src/index.js",  // 入口文件
    output:{ // 出口文件
        filename:"bundle.js", // 輸出文件名稱
        path:path.resolve(__dirname,'dist')  // 輸出的絕對(duì)路徑 ——> 這里就要引用 path
    },   
    module:{ //loader 配置
        rules:[ // 對(duì)于某個(gè)格式的文件進(jìn)行轉(zhuǎn)換處理
            {
                test:/\.css$/,
                use:[ // use 數(shù)組中的 loader 的順序，是從下到上，逆序執(zhí)行
                    'style-loader', // 將js的樣式內(nèi)容插入到style標(biāo)簽中
                    'css-loader' // 將css文件轉(zhuǎn)換為js
                ] 
            },
            {
                test:/\.(jpg|png|gif)$/,  // 對(duì)匹配的圖片進(jìn)行處理
                loader:'url-loader',
                options:{
                    limit:8*1024, // 如果圖片小于 8kb base64處理，減少請(qǐng)求數(shù)量，會(huì)使的體積更大
                    esModule:false,  // url-loader 的 es6 模塊化解析關(guān)掉
                    name:'[hash:10].[ext]'  // [hash:10] 取圖片hash的前10位   .[ext] 取圖片的擴(kuò)展名
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            }
        ]
    },  
    plugins:[ // 插件配置    注意 這里是 plugins ，不是plugin，很容易出錯(cuò)
        new HtmlWebpackPlugin({
            template:'./src/index.html'  // 告訴打包模板，要打包的html在哪里，這里寫的是 html 文件的位置在哪里
        })
    ]
}

4，當(dāng)項(xiàng)目打包時(shí)用到文件，也要安裝一個(gè)依賴，file-loader，

操作指令：npm install file-loader --save-dev

以上就是我這周學(xué)習(xí)的，使用 webpack 搭的服務(wù)環(huán)境