Webpack基礎(chǔ)

1窿克、webpack的安裝

本教程是基于最新的webpack4.39.3 版本

注意：webpack是基于node的则北，所以使用前請先自行安裝nodejs環(huán)境

全局安裝webpack（不推薦）

npm i webpack webpack-cli -g
項目中安裝webpack (推薦)

新建一個空文件涝缝，然后初始化npm init -y初始化一個package.json文件

然后去下載npm i webpack webpack-cli -D

2别洪、webpack的使用

①.webpack-cli

npm 5.2 以上的版本中提供了一個npx命令

npx 想要解決的主要問題母债，就是調(diào)用項目內(nèi)部安裝的模塊暇昂，原理就是在node_modules下的.bin 目錄中找到對應(yīng)的命令執(zhí)行

使用webpack命令：npx webpack

webpack4.0之后可以實現(xiàn)0配置打包構(gòu)建舶得，0配置的特點就是限制較多掰烟，無法自定義很多配置,默認打包./src/index.js文件，默認打包到./dist文件夾下

開發(fā)中常用的還是使用webpack配置進行打包構(gòu)建

②.webpack配置

webpack有四大核心概念:

入口(entry): 程序的入口js
輸出(output): 打包后存放的位置
loader: 用于對模塊的源代碼進行轉(zhuǎn)換
插件(plugins): 插件目的在于解決 loader無法實現(xiàn)的其他事

配置webpack.config.js
運行npx webpack會自動加載當(dāng)前目錄內(nèi)的webpack.config.js文件，或者可以在package.json文件的script腳本內(nèi)配置"build":"webpack":然后使用npm run build即可打包
1. 按照指定文件打包的話需要配置webpack --config xxx.config.js

const path = require('path')

module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置項
  output: {
    // 輸出的路徑纫骑，webpack2起就規(guī)定必須是絕對路徑
    path: path.join(__dirname, 'dist'),
    // 輸出文件名字
    filename: 'bundle.js'
  },
  mode: 'development' // 默認為production, 可以手動設(shè)置為development, 區(qū)別就是是否進行壓縮混淆
}

③.開發(fā)時自動編譯工具

每次要編譯代碼時蝎亚，手動運行 npm run build 就會變得很麻煩。

webpack 中有幾個不同的選項先馆，可以幫助你在代碼發(fā)生變化后自動編譯代碼：

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

watch

在webpack指令后面加上--watch參數(shù)即可

主要的作用就是監(jiān)視本地項目文件的變化, 發(fā)現(xiàn)有修改的代碼會自動編譯打包, 生成輸出文件

配置package.json的scripts"watch": "webpack --watch"
運行npm run watch

以上是cli的方式設(shè)置watch的參數(shù)

還可以通過配置文件對watch的參數(shù)進行修改：

const path = require('path')

// webpack的配置文件遵循著CommonJS規(guī)范
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve() : 解析當(dāng)前相對路徑的絕對路徑
    // path: path.resolve('./dist/'),
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  watch: true
}

運行npm run build

webpack-dev-server (推薦)

安裝devServer：

devServer需要依賴webpack发框，必須在項目依賴中安裝webpack

npm i webpack-dev-server webpack -D
index.html中修改 <script src="/bundle.js"></script>
運行：npx webpack-dev-server
運行：npx webpack-dev-server --hot --open --port 8090
配置package.json的scripts："dev": "webpack-dev-server --hot --open --port 8090"
運行npm run dev

devServer會在內(nèi)存中生成一個打包好的bundle.js，專供開發(fā)時使用煤墙，打包效率高梅惯，修改代碼后會自動重新打包以及刷新瀏覽器，用戶體驗非常好

以上是cli的方式設(shè)置devServer的參數(shù)

還可以通過配置文件對devServer的參數(shù)進行修改：

修改webpack.config.js

const path = require('path')

module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置項
  output: {
    // 輸出的路徑仿野，webpack2起就規(guī)定必須是絕對路徑
    path: path.join(__dirname, 'dist'),
    // 輸出文件名字
    filename: 'bundle.js'
  },
  devServer: {
    port: 8090,
    open: true,
    hot: true
  },
  mode: 'development'
}

修改package.json的scripts: "dev": "webpack-dev-server"
運行npm run dev

html插件

安裝html-webpack-plugin插件npm i html-webpack-plugin -D
在webpack.config.js中的plugins節(jié)點下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'template.html'//根據(jù)模板生產(chǎn)铣减，可以不用
    })
]

devServer時根據(jù)模板在express項目根目錄下生成html文件(類似于devServer生成內(nèi)存中的bundle.js)
devServer時自動引入bundle.js
打包時會自動生成index.html，或者根據(jù)模板生成html

小結(jié)

只有在開發(fā)時才需要使用自動編譯工具, 例如: webpack-dev-server
項目上線時都會直接使用webpack進行打包構(gòu)建, 不需要使用這些自動編譯工具
自動編譯工具只是為了提高開發(fā)體驗

3.webpack的loader處理非js文件

①.webpack處理css文件

配置webpack.config.js

  module: {
    rules: [
      // 配置的是用來解析.css文件的loader(style-loader和css-loader)
      {
        // 用正則匹配當(dāng)前訪問的文件的后綴名是  .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // webpack底層調(diào)用這些包的順序是從右到左脚作，從下到上
      }
    ]
  }

loader的釋義:

css-loader: 解析css文件
style-loader: 將解析出來的結(jié)果放到html中, 使其生效

②.webpack處理less文件

安裝npm i less less-loader -D
rules中加入{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

③.webpack處理sass文件

安裝npm i sass-loader node-sass -D
rules中加入{ test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

④.處理圖片文件

安裝npm i file-loader url-loader -D
url-loader封裝了file-loader, 所以使用url-loader時需要安裝file-loader
在rules規(guī)則中加入以下規(guī)則：

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
            // limit表示如果圖片大于5KB葫哗，就以路徑形式展示，小于的話就用base64格式展示
            limit: 5 * 1024,
            // 打包輸出目錄
            outputPath: 'images',
            // 打包輸出圖片名稱
            name: '[name]-[hash:4].[ext]'
        }
    }]
}

⑤.處理字體圖標文件

npm i bootstarp@3 -S安裝bootstrap3.x 版本的
建立index.html給html-webpack-plugin添加一個模板,指定這個index.html的文件位置
在index.js中引入bootstrap的css樣式文件import "bootstrap/dist/css/bootstrap.css"
在index.html中使用bootstrap的字體圖標球涛，報錯
安裝npm i file-loader url-loader -D
在rules中加入以下規(guī)則 {test:/\.(woff|woff2|eot|svg|ttf)$/, use:'url-loader'}

4.webpack的babel轉(zhuǎn)換js語法

①.將ES6的語法轉(zhuǎn)為ES5的語法

npm i babel-loader @babel/core @babel/preset-env webpack -D

{
    test:/\.js$/,
    use:{
        loader:"babel-loader",
        options:{
            presets:["@babel/env"],  
        }
    }
}

②.支持更高級的ES語法, 需要繼續(xù)安裝插件:

比如使用類的靜態(tài)屬性：

class Peopel{
    //這個語法babel默認不支持劣针，如果需要支持還要下載插件，報錯提示
    static name = "李四" 
    constructor(name,age){
        this.age = age
        this.name = name
    }
}
p = new Peopel("戰(zhàn)三",12)
console.log(p.name)

1.npm i @babel/plugin-proposal-class-properties -D

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/env'],
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
  exclude: /node_modules/
}

使用generator函數(shù)

function *fn(){
    yield 1
    yield 2
    return 3
}
var newFn = fn()
console.log( newFn.next() )
console.log( newFn.next() )
console.log( newFn.next() )
console.log( newFn.next() )
// 打包后運行報錯亿扁，新版本游覽器原本支持使用generator函數(shù)酿秸，但是使用webpack就會報錯

regeneratorRuntime is not defined

如果需要使用generator，無法直接使用babel進行轉(zhuǎn)換魏烫，因為會將generator轉(zhuǎn)換為一個regeneratorRuntime辣苏，然后使用mark和wrap來實現(xiàn)generator但由于babel并沒有內(nèi)置regeneratorRuntime，所以無法直接使用

需要安裝插件:npm i @babel/plugin-transform-runtime -D 同時還需安裝運行時依賴:npm install --save @babel/runtime 配置文件的時候不要忘了exclude: /node_modules/哄褒，否則報錯 babel插件鏈接

"plugins": [
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-transform-runtime"
 ]

官方更建議的做法是在項目根目錄下新建一個.babelrc的babel配置文件稀蟋，在.babelrc中添加插件,它是json格式的文件:

{
 "presets": [
 "@babel/env"
 ],
 "plugins": [
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-transform-runtime"
 ]
}

使用ES6/7中對象原型提供的新方法 babel默認情況無法轉(zhuǎn)換，即使用了transform-runtime的插件也不支持轉(zhuǎn)換原型上的方法

//js是一門動態(tài)語言呐赡，在代碼執(zhí)行時可以隨時為對象添加屬性和方法退客，babel在看到對象調(diào)用方法的時候默認不會進行轉(zhuǎn)換，include這樣的新方法默認不會轉(zhuǎn)換
var str = "gao"
console.log( str.includes('a') )

需要使用另一個模塊:npm i @babel/polyfill -S
該模塊需要在使用新方法的地方直接引入:import '@babel/polyfill'

source map的使用

devtool

此選項控制是否生成链嘀，以及如何生成 source map萌狂。使用source map得啟用瀏覽器的source map設(shè)置

使用 SourceMapDevToolPlugin 進行更細粒度的配置。查看 source-map-loader 來處理已有的 source map怀泊。

選擇一種 source map 格式來增強調(diào)試過程茫藏。不同的值會明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。

可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 來替代使用 devtool 選項霹琼，它有更多的選項务傲，但是切勿同時使用 devtool 選項和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件凉当。因為devtool 選項在內(nèi)部添加過這些插件，所以會應(yīng)用兩次插件售葡。

devtool	構(gòu)建速度	重新構(gòu)建速度	生產(chǎn)環(huán)境	品質(zhì)(quality)
(none)	+++	+++	yes	打包后的代碼
eval	+++	+++	no	生成后的代碼
cheap-eval-source-map	+	++	no	轉(zhuǎn)換過的代碼（僅限行）
cheap-module-eval-source-map	o	++	no	原始源代碼（僅限行）
eval-source-map	--	+	no	原始源代碼
cheap-source-map	+	o	no	轉(zhuǎn)換過的代碼（僅限行）
cheap-module-source-map	o	-	no	原始源代碼（僅限行）
inline-cheap-source-map	+	o	no	轉(zhuǎn)換過的代碼（僅限行）
inline-cheap-module-source-map	o	-	no	原始源代碼（僅限行）
source-map	--	--	yes	原始源代碼
inline-source-map	--	--	no	原始源代碼
hidden-source-map	--	--	yes	原始源代碼
nosources-source-map	--	--	yes	無源代碼內(nèi)容

這么多模式用哪個好看杭？

開發(fā)環(huán)境推薦：

? cheap-module-eval-source-map

生產(chǎn)環(huán)境推薦：

? none(不使用source map)

原因如下：

使用 cheap 模式可以大幅提高 soure map 生成的效率。大部分情況我們調(diào)試并不關(guān)心列信息挟伙，而且就算 source map 沒有列楼雹，有些瀏覽器引擎（例如 v8）也會給出列信息。
使用 module 可支持 babel 這種預(yù)編譯工具尖阔，映射轉(zhuǎn)換前的代碼烘豹。
使用 eval 方式可大幅提高持續(xù)構(gòu)建效率。官方文檔提供的速度對比表格可以看到 eval 模式的重新構(gòu)建速度都很快诺祸。
使用 eval-source-map 模式可以減少網(wǎng)絡(luò)請求携悯。這種模式開啟 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那樣筷笨，瀏覽器需要發(fā)送一個完整請求去獲取 sourcemap 文件憔鬼，這會略微提高點效率。而生產(chǎn)環(huán)境中則不宜用 eval胃夏，這樣會讓文件變得極大轴或。

這么多模式用哪個好？