webpack筆記一：webpack的介紹，安裝，加載css、圖片、字體等

時間  2019-11-10
標籤 webpack 筆記 介紹 安裝 加載 css 圖片 字體 欄目 CSS 简体版
原文   原文鏈接

寫在前面的話：

在當前grunt、gulp、webpack成爲平常工具的狀況下，若是你還只是熟練的使用html、css和激塊瑞的話，已經遠遠不能知足項目的需求，因此你得變強，你須要懂得更多。如今前端不只僅是用那幾句蹩腳的JavaScript代碼在瀏覽器渲染幾個頁面而後提交幾個表單在寫點交互了。如今WebGL協議能夠爲HTML5 Canvas提供硬件3D加速渲染，你能夠用JavaScript語法能夠渲染3D模型，你也能夠用nodejs搭建後臺，還能夠用react-native、weex作一個app。js發展的也愈來愈像後臺語言，畢竟js已經將它的魔爪伸到了不少領域，這讓你能夠猥瑣欲爲。。。確實每一個前端都應該有一統前端界的野心，寄人籬下只是暫時的 ⌒_⌒....javascript

1、webpack安裝及概念

webpack是現代JavaScript應用程序的靜態模塊打包工具，webpack是經過npm來安裝的，npm是跟node一塊兒下載的包管理工具，因此你得保證電腦上已經安裝了node。在安裝以前先來講下cnpm，由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，那下載速度讓人不禁得喊一聲「王德發」，因此咱們‘偉大的’淘寶團隊幹了一件偉大的事：「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。」 你只要執行如下命令：css

$ npm install -g cnpm

用了cnpm以後那速度讓人爽得不要不要的，不再用擔憂摔鍵盤的問題了。html

那麼下面就來介紹一下webpack的安裝，安裝包括本地安裝和全局安裝（我用的是webpack4版本）：前端

全局安裝（全局安裝是安裝到你C盤裏，在任何地方均可以使用）：java

cnpm i webpack -g

本地安裝（是安裝到當前目錄，只能在當前目錄使用）：node

cnpm i webpack -D //i 是install 的縮寫

若是你想安裝webpack特定的版本，好比說2.2：react

cnpm i webpack@2.2 -D

在之前的版本中webpack和webpack-cli是一體的，但在webpack4中，它把webpack和它的cli分開來以方便於管理，因此還須要安裝：webpack

cnpm i webpack-cli -D

到這裏咱們已經懷着美滋滋的心情介紹完webpack的安裝方法了，如今介紹一下webpack的基本概念，它的基本概念有四個，是的只有四個，你沒有看錯（是否是很高興？你高興的太早了）：git

  • 入口（entry）
  • 輸出（output）
  • loader
  • 插件（plugins）

咱們來簡單說一下傢伙的功能先李姐李姐：

entry：顧名思義就是入口，就好像一個口袋的袋口，要裝東西（好比說一支筆）進去就要經過這裏。github

output：確定就是出口啦，你把一個裝筆的袋子拿繩子捆起來後放到一個地方，這個地方就是出口。

loader：這個單詞的意思是裝貨的人，那麼在這裏就是指的是那個裝筆的人，意思是由於筆不可能本身跑進袋子裏，須要一我的代勞。其實正確的解釋是webpack自身只能理解javascript，它不認識這支筆是什麼東西，因此就須要loader告訴webpack這是一支筆，那麼webpack就能理解這支筆了。

plugins：這個就是插件，咱們對插件確定很熟悉了，在項目中咱們用過不少各類各樣的插件，它能夠用來處理各類各樣的任務。

2、一個簡單的項目

介紹完了webpack的安裝以及概念，讓咱們釋放一下蠢蠢欲動的心作一個小項目吧：

  • 讓咱們新建一個文件夾
mkdir webpack_lesson_one
  • 進入到新建的文件夾內
cd webpack_lesson_one
  • 新建一個項目
npm init -y
  • 安裝webpack以及webpack-cli
cnpm i webpack webpack-cli -D
  • 接下來咱們在根目錄新建一個index.html和一個webpack的配置文件webpack.config.js以及一個資源文件夾src，完成以上流程之後咱們的目錄應該是這個樣子的：

clipboard.png

  • 咱們在src目錄裏面新建一個入口文件index.js，而後編輯文件如圖：

clipboard.png

  • 而後咱們開始編輯webpack.config.js:
const path = require('path');

module.exports = {
    entry:{    //入口文件配置，固然這裏能夠配置多個入口文件，在此對象內增長增長鍵值對便可
        app: './src/index.js'
    },
    output:{    //出口文件配置
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    }
}
//path.resolve()是nodejs中的語法，拼接路徑， __dirname表明項目根目錄
  • 修改package.json文件增長"scripts"命令，以下：

clipboard.png

接下來在根目錄的index.html中引入app.bundle.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="dist/app.bundle.js"></script>
</body>
</html>
  • 接下來打開終端執行命令：
npm run build

接下來就是見證奇蹟的時刻了，你的項目根目錄會生成dist文件夾，瀏覽器運行index.html就會看到hello world！，那麼咱們的一個超級森破的項目就這樣完成了。

3、引入css、圖片、字體

在介紹上面幾個功能前先說一下項目目錄的合理分配，一個合適的項目目錄能夠下降總體項目的依賴性，大大提升工做中的開發效率，因此資源管理必定作好。那麼在src目錄中新建components目錄，而後新建文件以下：

|- /src
|- |- /components
|- |  |- /News
|- |  |- |- /img
|- |  |- |- index.js
|- |  |- |- style.css
|- index.js
  • 接下來咱們呢先安裝style-loader和css-loader以及file-loader：
cnpm i style-loader css-loader file-loader -D
  • 下面在webpack.config.js中配置:
const path = require('path');

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']    //這裏須要注意下，style-loader 必需要寫在 css-loader 以前喲
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',    //能夠重寫css中引入圖片部分
                            publicPath: 'dist/'    //能夠從新生成圖片到新的目錄
                        }
                    }
                ]
            }
        ]
    }
}

咱們來修改src目錄下的index.js

clipboard.png

編寫News目錄下的style.css文件

body{
    background: #fff url(img/banben.png) 0 0 no-repeat;
}

編寫News目錄下的index.js文件

import './style.css';

console.log('有一天我但願站在這個世界的頂端說出八個大字：個人，個人，都是個人！');

如今你再運行npm run build命令，再運行index.html看看是否是這樣的效果（啊，多麼漂亮的圖標啊！）：

clipboard.png

再看看裏面加載的css：

clipboard.png

圖片後面自動加上了參數，這就是上面的配置項name:'img/'+'[name].[ext]?[hash]'的做用。你能夠去看看file-loader的使用方法，讓咱們姿式一塊兒漲，1(yao)3(san)一塊兒裝。

  • 那麼引入字體也是一樣的道理，編輯webpack.config.js文件：
const path = require('path');

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']    //這裏須要注意下，style-loader 必需要寫在 css-loader 以前喲
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',    //能夠重寫css中引入圖片部分
                            publicPath: 'dist/'    //能夠從新生成圖片到新的目錄
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|otf|ttf)$/,
                use:['file-loader']
            }
        ]
    }
}
  • 在src目錄下新建public文件夾，放入字體文件資源：

clipboard.png

  • 在src目錄下的index.js引入字體css文件：

clipboard.png

  • 在index.html中添加字體標籤：

clipboard.png

再去News裏改變一下字體的大小，作人就是要大氣一些：

clipboard.png

而後再npm run build一下看看字體圖標已經加載出來了！！！

clipboard.png

4、圖片的壓縮以及舊文件的刪除

咱們已經能加載圖片了，那麼試着壓縮一下吧，畢竟濃縮的纔是精華、O(∩_∩)O哈哈~。。另附直通車image-webpack-loader，一條龍式服務必須滴。
仍是老樣子，固然仍是先安裝image-webpack-loader

cnpm i image-webpack-loader -D

修改webpack.config.jsmodule裏的rules：

module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',
                            publicPath: 'dist/'
                        }
                    },
                    {    //壓縮圖片要在file-loader以後使用
                        loader:'image-webpack-loader',
                        options:{
                            bypassOnDebug: true
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:['file-loader']
            }
        ]
    },

如今你npm run build以後看看dist文件夾內的banben.png和以前的圖片大小對比，是否是小了一半，就是這麼方便。

  • 還有咱們在作項目時不少時候都須要刪除以前廢棄的文件。舉個栗子：如今咱們把上面的file-loader裏的name參數變一下：
{
        loader:'file-loader',
        options:{
            name:'img/'+'[hash].[ext]', //把[name] 換成 [hash]
            publicPath: 'dist/'
        }
    }

這樣咱們生成的文件是一個以哈希值命名的圖片，當咱們改變原圖片名字的時候再打包後會從新生成一個圖片文件，可是以前生成的依然還在那裏一動不動。這個時候咱們就須要用到clean-webpack-plugin了，固然這個是插件不是loader喲~ 那就讓咱們來安裝吧：

cnpm i clean-webpack-plugin -D
  • 同理配置一下webpack.config.js 
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');    //插件是須要引入的，這裏可別忘了引入

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[hash].[ext]',
                            publicPath: 'dist/'
                        }
                    },
                    {
                        loader:'image-webpack-loader',
                        options:{
                            bypassOnDebug: true
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:['file-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist/img']) //數組內的是須要清理的目錄
    ]
}

來來來，咱們npm run build一下，是否是你的img文件消失一下後又從新浮如今你的眼前了，若是沒有消失過多是你的眼花了。
固然你還能夠設置其它參數，詳見clean-webpack-plugin

plugins:[
    new CleanWebpackPlugin(['dist/img'],{
        exclude: [ 'banben.png' ]    //這個配置意思就是不刪除 img 文件裏面的 banben.png 圖片
    })
]

如今本期webpack筆記已經到此結束了，另附上github項目練習素材地址：https://github.com/zgf123/web...

5、知識小結

webpack遵循commonJs規範，每一個文件就是一個模塊，有本身的做用域。在一個文件裏面定義的變量、函數、類，都是私有的，對其餘文件不可見。CommonJS規範規定，每一個模塊內部，module變量表明當前模塊。這個變量就是一個對象，它的exports屬性就是對外的接口，所謂加載某個模塊，其實就是加載這個模塊的modules.exports屬性。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程