前端構建_webpack

webpack 是什麼？

webpack是一個前端模塊化打包工具指（因爲模塊化開發，因此須要打包，這裏所說的 模塊化開發主要指JS)

因爲現代前端應用程序愈來愈複雜，須要採用模塊化進行開發，但瀏覽器還未支持模塊化開發，因此webpack才誕生

webpack默認只支持js的模塊化（CommonJS/ES6/AMD），若是須要把其餘文件（css/圖片等）也當成模塊引入，就須要相對應的loader解析器

現代前端

• 掛載點

傳統前端的掛載點：html入口文件 （不管是js、css仍是圖片等資源都統一由html文件管理和調度）

現代前端的掛載點：js入口文件 （不管是js組件、css仍是圖片等資源都統一由js文件管理和調度，html文件做爲模板）

• 模塊化與打包工具

傳統前端：都是多頁面應用，無模塊化概念，所以無需打包工具

現代前端：能夠是單頁面應用，也能夠是多頁面應用，有模塊化概念，因爲歷史緣由，不少瀏覽器還不支持模塊化，故出現打包工具

• 導入模塊資源

傳統前端：在html文件，導入css資源使用<style>或<link>，導入js資源使用<script>，導入圖片資源使用url()或者<img src="">

現代前端：在js中導入資源，使用import，在css中導入css資源，使用@import

安裝

• webpack

使用NPM進行安裝，有2種方式：全局安裝、局部安裝（ 局部又分爲生產局部安裝和開發局部安裝）

全局安裝： npm i -g webpack

局部開發安裝： npm i -D webpack  // （推薦此）JS應用在生產環境上不須要webpacke,因此無需使用生產局部安裝

局部安裝的項目，會在當前項目中node_module中，不會污染全局

• webpack-cli

v4.0.0以後，除了要安裝webpack，還須要安裝webpack-cli

局部開發安裝： npm i -D webpack-cli

配置

• 默認配置

在應用根目錄下，定義webpack.config.js文件

執行webpack時，直接在命令行輸入webpack (會默認尋找webpack.config.js配置文件)

• 自定義配置

在應用根目錄下，自定義webpack.config.dev.js文件

執行webpack時，直接在命令行輸入webpack --config webpack.config.dev.js

若是把webpack.config.dev.js配置文件放在根目錄下的文件夾裏呢？

• 最簡單配置 —— 打包JS模塊

const path = require('path');

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

插件

• 簡單建立 HTML 文件，用於服務器訪問

全部打包好的JS文件，都要有一個html文件來引入，不然瀏覽器沒法瀏覽，這個功能就是webpack插件 HtmlWebpackPlugin功能

一、安裝
npm install --save-dev html-webpack-plugin

二、在webpack.config.js文件中配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development'
};

服務器 for dev

webpack提供了一個用於開發使用的服務器： webpack-dev-server，前端應用開發，須要一個調試開發服務器來看即時效果

• 安裝

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

• 配置

一、配置執行服務器命令
在package.json中，配置
"scripts": {
    "sdev": "webpack-dev-server"
}
*****注意：默認服務器是讀取webpack.config.js文件，若是自定義了，須要加上--config webpack.config.dev.js*****

二、在webpack配置文件中配置
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development',
    devServer: {
        open: true,  // 自動開啓
        contentBase: path.join(__dirname, 'dist'),
        index: 'main.html'
    }
};

• 執行原理

執行webpack，根據配置文件，會生成打包後的文件（硬盤）
執行webpack-dev-server，根據配置文件，會生成打包後的文件（內存），並啓動服務器

Babel 語法轉換

Babel 是一個 NodeJS的獨立應用，用於把ES2015/ES2016/ES2017/React轉換成ES5

用法：
一、在瀏覽器中使用
二、webpack打包中使用 （如下主要講解這種方式）
三、命令行直接使用

• 安裝

npm install -D babel-loader @babel/core @babel/preset-env

CSS 引入

在webpack中任何一個東西都稱爲模塊，js就不用說了。一個css文件，一張圖片、一個less文件都是一個模塊，都能用導入模塊的語法（commonjs的require，ES6的import）導入進來。webpack自身只能讀懂js類型的文件，其它的都不認識。可是webpack卻能編譯打包其它類型的文件，像ES六、JSX、less、typeScript等，甚至css、images也是Ok的，而想要編譯打包這些文件就須要藉助loader

import（導入）是ES6 Module的模塊化語法，與export（導出）是一對對應的技術，因此 *ES6 所說的導入都是導入 JS 文件*，而這個JS文件通常會有導出語法

• 問題：爲什麼webpack中能使用ES6 import語法導入CSS文件？

其實ES6 import語法沒有規定必定要導入JS文件，但若是你導入的是非JS文件，運行時會報錯的

webpack借用了ES6的導入/導出語法，自己就支持導入JS文件
若是須要轉ES5，須要額外配置一個loader

不一樣的是:
webpack還支持導入別的文件（圖片、css、less等），語法也是借用了ES6的導入/導出語法，須要額外配置一個loader

• 安裝

npm i style-loader css-loader -D

• 配置

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

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        })
    ],
    devServer: {
        open: true,
        contentBase: path.join(__dirname, 'dist'),
        index: 'index.html'
    },
    module:{
        rules:[{
            test:/\.css$/,
            use: ['style-loader', 'css-loader']  //執行loader的前後順序是從右到左，必須先執行css-loader
        }]
    }
};

理解 ['style-loader', 'css-loader'] 執行順序，就至關於 styleLoader( cssLoader( fileSource ) )

• css-loader

主要用於把.css文件的內容中@import/url()轉成js的導入語法import/require並執行，輸入的是.css文件內容，最後常常css-loader加載器處理後，獲得的是css代碼字符串

• style-loader

主要用於把css-loader處理後的css代碼字符串添加到頁面head內<style>中，可是經過js動態添加進去的