webpack走在前端技術的前沿（深刻淺出）

時間  2019-12-06
標籤 webpack 走在 前端 技術 前沿 深刻 简体版
原文   原文鏈接

Webpack

網上有不少webpack的介紹，也有很多的視頻，可是很多人看到應該仍是不是很瞭解webpack裏面究竟是講什麼，並且報錯了以後也是不知所措css

那麼這裏我做爲一個工具小白就闡述一下小白麪前應該怎麼學習webpack吧，當你看完以後，我相信對其餘工具也會有更深的瞭解html

概述

在個人文章裏主要講解：前端

  1. webpack基本介紹及安裝
  2. webpack基本配置和配置文件
  3. webpack在項目中如何自動生成html文件
  4. 強大的loader加載器

還有更多的功能我也會在文中說起到node

附：webpack官網地址[英文官網][中文官網]webpack

1.webpack基本介紹及安裝

1.1 webpac基本介紹

Webpack是時下最流行的模塊打包器web

它的主要任務就是將各類格式的JavaScript代碼，甚至是靜態文件進行分析、壓縮、合併、打包，最後生成瀏覽器支持的代碼正則表達式

用一張圖片簡單表示一下npm

image

特色：json

  • 代碼拆分方案：webpack能夠將應用代碼拆分紅多個塊，每一個塊包含一個或多個模塊，塊能夠按需異步加載，極大提高大規模單頁應用的初始加載速度
  • 智能的靜態分析：webpack的智能解析器幾乎能夠處理任何第三方庫
  • Loader加載器：webpack只能處理原生js模塊，可是loader能夠將各類資源轉換爲js模塊
  • plugin插件：webpack有功能豐富的插件系統，知足各類開發需求
  • 快速運行：webpack 使用異步 I/O 和多級緩存提升運行效率，使得它可以快速增量編譯

綜合來講webpack綜合了目前網絡上的打包工具的優勢，可是也要合理使用，否則也會拔苗助長gulp

1.2 webpack的安裝

  • 第一步，首先得安裝好node.js和npm

npm是前端開發者必備的下載工具吧，若是你連這個也沒有安裝的話，那麼你就得快點安裝了，這裏附一個gulp打包工具的教程，這裏第一和第二步有node.js和npm的安裝具體教程，若是你沒有安裝，那就得快點入門了。

  • 第二步，進入webpack世界
  1. 首先，新建一個webpack-test文件夾做爲你的項目目錄
  2. 而後，用npm初始化你的項目，進入cmd，切換到你的目錄下，輸入：
npm init

而後會出現一大堆輸入的東西，這裏咱們所有選擇默認輸入enter就行了

image

輸入完了以後，它會提示你輸入的信息給你覈對，按下確認以後，就會在你的項目目錄下生成了package.json

image

下一步，咱們在咱們的文件夾裏面安裝一下webpack吧，在項目目錄下的cmd輸入

npm install webpack --save-dev

這就安裝好了，這裏就給你們來一個小Demo，讓你們更加了解webpack的打包方式吧，若是已經有基礎的同窗能夠跳過這裏

1.3 webpack幾個小Demo

在webpack-test下新建一個hello.js，輸入下面的代碼

//自定義一個函數
function hello (str) {
    alert(str);
}

而後在命令行輸入

webpack hello.js hello.bundle.js

這裏的意思是用webpack文件將hello.js打包成hello.bundle.js輸出在根目錄下，成功以後在根目錄下就會出現hello.bundle.js文件

image

而後介紹一下咱們打包成功的各個東西的含義吧

image

而後再在根目錄下新建一個world.js，在文件裏輸入

//隨便自定義一個函數
function world () {

}

再去修改hello.js成爲

require('./world.js')   //鏈接到另一個函數塊

//自定義一個函數
function hello (str) {
    alert(str);
}

再輸入一下

webpack hello.js hello.bundle.js

進行打包以後就會發現，打包成功裏面hello.js的chunks序列號是0，world.js的chunks序列號是1，而後在hello.bundle.js看到他們的序列號也是這樣。

那麼若是我想也把css文件也打包進去應該怎麼辦呢？

咱們再在根目錄下新建一個style.css，在裏面簡單輸入

html, body {
    padding: 0;
    margin: 0;
}

而後這裏咱們須要下載兩個loaders加載器，爲何要下載loaders加載器呢，你也能夠想想，css文件和js文件畢竟不同，若是在hello.js引入style.css那麼確定會報錯，這個時候，咱們須要一種東西幫忙加載咱們的css成js

接下來咱們下載兩個loaders加載器，後面說一下這兩個的做用，在命令行輸入

npm install css-loader style-loader

而後把hello.js改爲

require('./world.js')   //鏈接到另一個函數塊
require('css-loader!./style.css')   //利用css-loader加載器解析css文件使之可讀

//自定義一個函數
function hello (str) {
    alert(str);
}

再在輸入一下指令，打包好了後了能夠觀察hello.bundle.js裏面就多了css文件裏面的內容

這時候，你也許會以爲，我說了那麼多，那麼，怎麼把這些東西用到咱們的頁面中嗎？下面就會說到

在咱們的跟目錄下新建一個index.html，加入下面內容

<!DOCTYPE html>
<html lang="en">
<head>
    <title>webpack</title>
</head>
<body>
    <script src="./hello.bundle.js"></script>
</body>
</html>

再把咱們的style.css改爲

html, body {
    padding: 0;
    margin: 0;
}

body {
    color: red;
}

再把咱們的hello.js改爲

require('./world.js')   //鏈接到另一個函數塊
require('style-loader!css-loader!./style.css')   
//利用css-loader加載器解析再用style-loader解析css文件使之可讀

//自定義一個函數
function hello (str) {
    alert(str);
}

hello('hello webpack');

而後咱們再打包運行一下,就能夠在頁面看到咱們的結果，這時候若是你細心，就會發現咱們在css-loader前面加了個style-loader，若是你不加的話，你就會發現你的頁面打開後不是紅色的，由於還沒通過style-loader的解析，固然這只是一種方法，還有其餘方法能夠自尋在官網看看文檔。

若是你以爲每次修改以後打包也很麻煩，這時候咱們的watch就有做用了，你能夠在打包後面加入，例如輸入

webpack hello.js hello.bundle.js --watch

而後下次修改就不用在進行輸入打包代碼了，這上面也就是簡單的介紹了一下咱們的webpack是怎麼從一個文件連接到不少文件的。

2.webpack基本配置和配置文件

這裏就是咱們最重要的一個部分了，若是你看過不少webpack打包後的開源項目以後，你就會發現，有些時候你不知道從哪裏看起，那就從配置文件開始看起來吧

相信你應該也在很多的文章中看到有關於配置文件的說法的吧，畢竟配置文件也算是最重要的一部分了，這裏也能夠推薦你看一篇我以爲還不錯的webpack入門

不過我若是你沒有基礎的話，建議繼續看下個人再去看那一篇，收穫會更大

首先，咱們新建一個項目webpack-demo，按照我上面教程文章裏面下載安裝好webpack，安裝完了以後，咱們須要新建幾個文件以及文件夾，以下面所示

image

而後在index.html輸入

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>webpack demo</title>
</head>
<body>
    <script src="./dist/js/bundle.js"></script>
</body>
</html>

在webpack.config.js也就是webpack的配置文件裏面輸入

// webpack.config.js
module.exports = {
  entry:'./src/script/main.js', //咱們的入口文件，至關於前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了以後，把內容輸出到這個文件夾上,也能夠寫成"./dist/js"，
    可是這樣放在服務器上路徑可能會出錯，因此加上__dirname*/
    filename: 'bundle.js' //輸入到上面path文件夾裏面的bundle.js，沒有則自動新建
  }
}

再在main.js裏面輸入

//main.js
function helloworld () {
    alert('hello world');
}

helloworld();

在命令行輸入webpack,就將咱們的入口文件及其連接文件（這裏尚未）打包輸出在dist/js目錄下面的bundle.js文件了。

image

這就是咱們的配置文件的最簡單的用法，之後咱們還能夠在裏面配置不少loaders，甚至更復雜的打包，下面一步步說明吧。

咱們也能夠不用在命令行裏面輸入webpack，由於咱們可能之後會查詢更多東西，所以咱們能夠，在package.json的script裏面加入：

"webpack":"webpack --config webpack.config.js --progress --color"

這裏的--progress和--color只是爲了輸出進度條和color，沒有實際意義，而後在命令行輸入npm run webpack就能夠默認使用webpack進行打包了。

還有更多關於咱們入口文件和輸出文件的介紹，我建議看一下慕課網的這個視頻會更加了解webpack配置文件

3.webpack在項目中如何自動生成html文件

在說這個以前，咱們爲何要自動生成html頁面？咱們直接用index.html不就能夠了？可是實際項目每每是有多個頁面的，不過這裏咱們就簡單介紹一個頁面怎麼自動生成，多個也是一樣的原理，咱們先來安裝一個插件html-webpack-plugin，咱們在命令行輸入：

npm install html-webpack-plugin --save-dev

而後把咱們的webpack.config.js裏面修改爲

// webpack.config.js
var htmlWebpackPlugin  = require('html-webpack-plugin')//引入咱們的插件

module.exports = {
  entry: {
      main: './src/script/main.js',
  }, //咱們的入口文件，至關於前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了以後，把內容輸出到這個文件夾上,也能夠寫成"./dist/js"，
    可是這樣放在服務器上路徑可能會出錯，因此加上__dirname*/
    filename: '[name]-[hash].js' //輸入到上面path文件夾裏面的bundle.js，沒有則自動新建
  },
  plugins:[
      new htmlWebpackPlugin()  //對插件進行實例化
  ]
}

而後，在咱們的dist下面就有了一個項目自動生成的inex.html文件了

image

可是若是你細心就能夠發現這個時候的index.html和咱們原來的index.html沒有任何的聯繫，這時候咱們須要修改咱們配置文件中的插件實例化那裏修改爲

plugins:[
      new htmlWebpackPlugin({
          template: 'index.html'
      })  //對插件進行實例化
  ]

再打包一次以後，就會發現生成的dist目錄下面的index.html文件就會綁定了其餘js文件。更具體的就請查看一下官方文檔了，畢竟篇幅不能太長。

4.強大的loader加載器

前面咱們也有所提到咱們的loader加載器，可是實際中是怎麼樣的呢，這裏我圍繞咱們項目常常利用babel-loader轉換ES6

Loaders須要單獨安裝而且須要在webpack.config.js下的modules關鍵字下進行配置，Loaders的配置選項包括如下幾方面：

  • test：一個匹配loaders所處理的文件的拓展名的正則表達式（必須）
  • loader：loader的名稱（必須）
  • include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
  • query：爲loaders提供額外的設置選項（可選）

首先，新建一個工程webpack-loader吧，而後將項目用npm初始化後，再在項目下下載webpack，而後構建好下面的這些目錄

image

用npm下載一下html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

修改咱們的index.html成

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

layer.html

<div class="layer">
    <div>this is a layer</div>
</div>

layer.js

// import tpl from './layer.html'

function layer () {
    return {
        name: 'layer',
        tpl: tpl
    }
}

export default layer;

app.js

//app.js
import layer from './component/layer/layer.js';
//導入layer

//使用ES6語法
const App = function () {
    console.log(layer);
}

new App()

利用babel-loader轉換ES6

Babel實際上是一個編譯JavaScript的平臺，它的強大之處表如今能夠經過編譯幫你達到如下目的：

  • 下一代的JavaScript標準（ES6，ES7），這些標準目前並未被當前的瀏覽器徹底的支持；
  • 使用基於JavaScript進行了拓展的語言，好比React的JSX

首先，咱們先安裝Babel在命令行輸入

npm install --save-dev babel-loader babel-core

再安裝一下babel中的latest這裏咱們須要用到

npm install --save-dev babel-preset-latest

修改咱們的配置文件webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
      main: './src/app.js',
  }, //咱們的入口文件，至關於前面一節webpack-test中的hello.js
  output:{
    path: __dirname + "/dist/js", 
    /*打包完了以後，把內容輸出到這個文件夾上,也能夠寫成"./dist/js"，
    可是這樣放在服務器上路徑可能會出錯，因此加上__dirname*/
    filename: 'bundle.js' //輸入到上面path文件夾裏面的bundle.js，沒有則自動新建
  },
  module: {
    loaders: [
        {
            test: /\.js$/, //匹配全部的js文件
            loader: 'babel-loader', //引用lbabel插件           
        }

    ]
  },
  plugins: [
      new htmlWebpackPlugin({
          filename:'index.html',
          template:'index.html',
          inject:'body' //將script標籤加載進body
      })
  ]
}

再在咱們的package.json下加入

{
    //...
    "babel": {
        "presets": ["latest"]
    },
    //...
}

在命令行輸入webpack，就能夠在咱們的dist目錄下面的js裏面看到咱們的配置文件已經有了這些文件

其餘加載器css,less,sass等的原理也是同樣，這裏就不一一介紹了

有興趣的話，能夠繼續看看慕課網的視頻，在下也是受人啓發。

還有更多的加載器能夠在咱們的webpack官網進行查詢，這裏我就不進行多解釋了

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