webpack--------相似gulp的工具，在gulp後面出來的

時間  2019-11-24
標籤 webpack 相似 gulp 工具 後面 出來 欄目 JavaScript 简体版
原文   原文鏈接

webpack和gulp的差別：css

webpack比gulp功能強大，升級換代出來的，webpack主要用於react vue  angular2html

1.webpack是什麼？

CommonJS和AMD是用於JavaScript模塊管理的兩大規範，前者定義的是模塊的同步加載，主要用於NodeJS；然後者則是異步加載，經過requirejs等工具適用於前端。隨着npm成爲主流的JavaScript組件發佈平臺，愈來愈多的前端項目也依賴於npm上的項目，或者 自身就會發布到npm平臺。所以，讓前端項目更方便的使用npm上的資源成爲一大需求。前端

web開發中經常使用到的靜態資源主要有JavaScript、CSS、圖片、Jade等文件，webpack中將靜態資源文件稱之爲模塊。 webpack是一個module bundler(模塊打包工具)，其能夠兼容多種js書寫規範，且能夠處理模塊間的依賴關係，具備更強大的js模塊化的功能。Webpack對它們進行統 一的管理以及打包發佈，其官方主頁用下面這張圖來講明Webpack的做用vue

官網：http://webpack.github.io/docs/  node

Webpack-handlebook: http://zhaoda.net/webpack-handbook/react

Gitbook: http://fakefish.github.io/react-webpack-cookbook/index.htmljquery

參考網站：android

http://www.javashuo.com/article/p-nknsjncs-eh.htmlwebpack

https://github.com/ruanyf/webpack-demosgit

http://www.javashuo.com/article/p-ansmxtup-km.html

http://blog.csdn.net/yczz/article/details/49250623

https://github.com/petehunt/webpack-howto#8-optimizing-common-code

https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651220238&idx=1&sn=ebdba528f199e10f6b273c3a6fd04650&scene=0&key=b28b03434249256b7847bfdf62609ae5dc60fe6644c4c53f8f8e392425069ed2d9fa147c8c66f9d719456241c3a687ba&ascene=14&uin=MjYzMjMwMzE4MA%3D%3D&devicetype=android-21&version=26031031&nettype=WIFI&pass_ticket=3wAH%2BijJnBbvbS8rfC%2FF5Sv78DZDco29Ejqjt96dzxTLB72USiOBN69mnq9DFTFy

2.爲何使用webpack(主要用於單應用程序)

1. 對 CommonJS 、 AMD 、ES6的語法作了兼容

2. 對js、css、圖片等資源文件都支持打包

3. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持

4. 有獨立的配置文件webpack.config.js

5. 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間

6. 支持 SourceUrls 和 SourceMaps，易於調試

7. 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活

8.webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

3.快速開始

在項目根目錄打開命令窗口引入項目依賴，全局安裝

npm  install  webpack  -g // 全局安裝webpack

1.1.1 建立配置文件

在項目根目錄建立三個或多個webpack配置文件

（1）webpack.base.config.js  //公用的配置放在這裏面（可經過插件繼承）

（2）webpack.develop.config.js  //開發環境中用到的配置文件

（3）webpack.publish.config.js   //生產環境中用到的配置文件

1.1.2 修改配置文件

注意：開發環境的配置和生產環境的配置是不同的，具體的配置內容請看

http://webpack.github.io/docs/configuration.html

 

在項目根目錄打開命令窗口引入項目依賴，全局安裝

npm  install  webpack  -g // 全局安裝webpack

1.1.1 建立配置文件

在項目根目錄建立三個或多個webpack配置文件

（1）webpack.base.config.js  //公用的配置放在這裏面（可經過插件繼承）

（2）webpack.develop.config.js  //開發環境中用到的配置文件

（3）webpack.publish.config.js   //生產環境中用到的配置文件

1.1.2 修改配置文件

注意：開發環境的配置和生產環境的配置是不同的，具體的配置內容請看之後章節的介紹

詳細的請看這裏：

http://webpack.github.io/docs/configuration.html

 

// 這是最基本的一個配置文件

// 編寫配置文件，要有最基本的文件入口和輸出文件配置信息等

// 裏面還能夠加loader和各類插件配置使用

var path = require('path');


module.exports = {
    entry:path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
}

1.1.3 運行webpack

一、經過配置文件運行（通用）

（1）在根目錄運行webpack的命令，默認會去查找名稱爲webpack.config.js的文件執行，若是沒有就會報配置信息沒有配置的錯誤。

Webpack

（2）這時候咱們能夠經過運行下面的命令進行配置文件的選擇

webpack –-config  webpack.develop.config.js

二、經過cli命令運行（瞭解）

（1）webpack的cli也提供了命令能夠進行運行，例如：

Webpack  -watch       // webpack的監視命令，文件發生變化自動編譯

webpack --entry ./entry.js --output-path dist --output-file bundle.js

  //配置文件的啓動目錄和輸出目錄

webpack 最基本的啓動webpack命令

webpack -w 提供watch方法，實時進行打包更新

webpack -p 對打包後的文件進行壓縮

webpack -d 提供SourceMaps，方便調試

webpack --colors 輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟

webpack --profile 輸出性能數據，能夠看到每一步的耗時

webpack --display-modules 默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊

 webpack --display-error-details 方便出錯時能查閱更詳盡的信息（好比 webpack 尋找模塊的過程），從而更好定位到問題。

（2）你能夠運行webpack  -h查看webpack的其餘命令，自行了解，或者經過英文官網瞭解webpack Cli部分

三、做爲nodejs的api運行（瞭解）

var webpack = require('webpack');

webpack({

//configuration

}, function(err, stats){});

四、注意：可是咱們基本上不用這種直接提供的命令，由於咱們須要手動的敲打不少字母，咱們如今開發通用的方法都是使用配置文件的方式運行。

4.npm 的script的使用

一、你首先須要安裝webpack，這時候不全局安裝

npm i webpack --save

二、配置npm的package.json文件中

"scripts": {
             "test": "echo \"Error: no test specified\" && exit 1",
             "develop": "webpack --config webpack.develop.config.js",
             "publish": "webpack --config webpack.publish.config.js"
},

三、在根目錄打開的命令窗口運行

npm  run  develop

5.爲發佈目錄啓動服務

一、安裝webpack-dev-server

npm   i   webpack-dev-server   –save-dev

二、調整npm的package.json scripts 部分中開發命令的配置

{

 "scripts": {

 "develop": "webpack-dev-server  --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src",

"publish": "webpack --config webpack.publish.config.js",

"watch": "webpack --config webpack.develop.config.js --watch --hot"

 }

}

註釋：

webpack-dev-server - 在 localhost:8080 創建一個 Web 服務器

--devtool eval - 爲你的代碼建立源地址。當有任何報錯的時候可讓你更加精確地定位到文件和行號

--progress - 顯示合併代碼進度

--colors -- hot，命令行中顯示顏色！

--content-base  指向設置的輸出目錄//這點必定是咱們的發佈目錄

 

三、訪問 http://localhost:8080 你會看到效果。

總的來講，當你運行 npm run develop 的時候，會啓動一個 Web 服務器，而後監聽文件修改，而後自動從新合併你的代碼。真的很是簡潔！

四、注意

(1)用webpack-dev-server生成bundle.js文件是在內存中的，並無實際生成

(2)若是引用的文件夾中已經有bundle.js就不會自動刷新了，你須要先把bundle.js文件手動刪除

（3）用webstorm的注意了，由於他是自動保存的，因此可能識別的比較慢，你須要手動的ctrl+s一下

5.瀏覽器的自動刷新

修改webpack.develop.config.js的配置中的entry：

var path = require('path');

module.exports = {
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname,'src/js/app.js')
    ],
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
}

6.經常使用的加載器

Loader：這是webpack準備的一些預處理工具

1>babel-loader：代碼預處理加載器

 1.編譯jsx和ES6到原生js

    jsx語法：容許html寫在js文件中

  安裝依賴項：

npm install babel-loader --save-dev
npm install babel-core   babel-preset-es2015   babel-preset-react  --save-dev

2.修改配置文件

module: {
    loaders: [
        {
            test: /\.jsx?$/, // 用正則來匹配文件路徑，這段意思是匹配 js 或者 jsx
            loader: 'babel',// 加載模塊 "babel" 是 "babel-loader" 的縮寫
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}

3.運行：

  直接重新運行npm run develop便可

2>css-loader ：css樣式處理加載器

 1.下載依賴：

npm install css-loader   style-loader --save-dev

2.修改配置文件

{
     test: /\.css$/, // Only .css files
    loader: 'style!css' // Run both loaders  多個加載器，加載順序是從右到左
}

！用來定義loader的串聯關係，"-loader"是能夠省略不寫的，多個loader之間用「!」鏈接起來

 ***************************************************************

 css加載處理：

一、在主入口文件中，好比 src/app.js 你能夠爲整個項目加載全部的 CSS

Import  './project-styles.css';

CSS 就徹底包含在合併的應用中，不再須要從新下載。

二、懶加載（推薦）

若是你想發揮應用中多重入口文件的優點，你能夠在每一個入口點包含各自的 CSS。

你把你的模塊用文件夾分離，每一個文件夾有各自的 CSS 和 JavaScript 文件。再次，當應用發佈的時候，導入的 CSS 已經加載到每一個入口文件中。

 

三、定製組件css

你能夠根據這個策略爲每一個組件建立 CSS 文件，可讓組件名和 CSS 中的 class 使用一個命名空間，來避免一個組件中的一些 class 干擾到另一些組件的 class。

四、使用內聯樣式取代 CSS 文件

在 「React Native」 中你再也不須要使用任何 CSS 文件，你只須要使用 style 屬性，能夠把你的 CSS 定義成一個對象，那樣就能夠根據你的項目從新來考略你的 CSS 策略。

注意：這點的樣式都沒有-

 

3>sass-loader:sass加載器

 1.下載依賴：

    npm  install  sass-loader  --save-dev

 2.修改配置文件：

{
      test: /\.scss$/,
     loader: 'style!css!sass'
 }

4>url-loader file-loader：圖片加載器

1.下載依賴 
npm install url-loader  file-loader --save-dev

2.修改配置文件

{
      test: /\.(png|jpg)$/,
      loader: 'url?limit=25000'//?+limit=25000（圖片大小超過limit的值）會將圖片路徑轉換成字符串，反之是base64的字符串
      //base64會減小http請求（圖片過小了，不用發送請求，）

 }

加載器，它會把須要轉換的路徑變成 BASE64 字符串，在其餘的 Webpack 書中提到的這方面會把你 CSS 中的 「url()」 像其餘 require 或者 import 來處理。意味着若是咱們能夠經過它來處理咱們的圖片文件。

url-loader 傳入的 limit 參數是告訴它圖片若是不大於 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。

3.大圖片的處理方法：

在代碼中是一下狀況：
div.img{
    background: url(../image/xxx.jpg)
}

//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);
你能夠這樣配置
module: {
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

針對上面的兩種使用方式，loader能夠自動識別並處理。根據loader中的設置，webpack會將小於指點大小的文件轉化成 base64 格式的 dataUrl，其餘圖片會作適當的壓縮並存放在指定目錄中。

處理結果:

After launching the server, small.png and big.png will have the following URLs.

<img src="data:image/png;base64,iVBOR...uQmCC">

<img src="4853ca667a2b8b8844eb2693ac1b2578.png">

 5>處理font字體

{
      test: /\.(woff|eot|ttf|woff2|svg)$/,//多種字體格式
      loader: 'url?limit=100000'
}

7.部署策略

1>發佈配置

   *：修改npm的package.json文件

"publish": " webpack --config webpack.publish.config.js  -p",

     指向生產的配置文件，而且加上了webpack的cli的-p,他會自動作一些優化

   *： 修改webpack.publish.config.js文件

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');

  module.exports = {
    entry: path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/, // 用正則來匹配文件路徑，這段意思是匹配 js 或者 jsx
                loader: 'babel',// 加載模塊 "babel" 是 "babel-loader" 的縮寫
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/, // 處理css文件
                loader: 'style!css' // Run both loaders
            },
            {
                test: /\.scss$/,  //處理sass文件
                loader: 'style!css!sass'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=25000'
            }
        ]
    }
}

能夠看到，其實生產環境的配置和開發的配置沒有太大的不一樣，主要是把不須要的東西給去掉了

*：再運行     npm  run  publish

     最後會生成一個bundle.js文件

2>合併成單文件

           通常狀況下只有在下面的狀況下才使用單入口模式：

                一、應用很小

                二、不多會更新應用

                三、你不太關心初始加載時間

3>分離第三方包

   *：什麼時候分離？？     

             當你的應用依賴其餘庫尤爲是像 React JS 這種大型庫的時候，你須要考慮把這些依賴分離出去，這樣就可以讓用戶在你更新應用以後不須要再次下載第三方文件。當知足下面幾個狀況的時候你就須要這麼作了：

            一、當你的第三方的體積達到整個應用的 20% 或者更高的時候。

            二、更新應用的時候只會更新很小的一部分

            三、你沒有那麼關注初始加載時間，不過關注優化那些回訪用戶在你更新應用以後的體驗。

            四、有手機用戶。

   *：修改配置文件

       

var webpack=require("webpack")；//在頭部引入

結果：

 

注意：記住要把這些文件都加入到你的 HTML 代碼中，否則你會獲得一個錯誤：Uncaught ReferenceError: webpackJsonp is not defined。

4>和gulp的集成

分爲使用流和不使用流

http://webpack.github.io/docs/usage-with-gulp.html

gulp + webpack 構建多頁面前端項目

http://cnodejs.org/topic/56df76559386fbf86ddd6916

github-demo實際例子: https://github.com/MeCKodo/webpack

 8.經常使用插件

webpack提供了[豐富的組件]用來知足不一樣的需求，固然咱們也能夠自行實現一個組件來知足本身的需求：

plugins: [
     //your plugins list
 ]

詳細的請看這裏：

http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

註釋：Word中出現的全部的包，均可以經過npm進行包查找，而後查看具體的使用方法；

1>壓縮插件：這個插件是webpack自帶的

2>提取css插件

在webpack中編寫js文件時，能夠經過require的方式引入其餘的靜態資源，可經過loader對文件自動解析並打包文件。一般會將js 文件打包合併，css文件會在頁面的header中嵌入style的方式載入頁面。但開發過程當中咱們並不想將樣式打在腳本中，最好能夠獨立生成css文 件，之外鏈的形式加載。這時extract-text-webpack-plugin插件能夠幫咱們達到想要的效果。須要使用npm的方式加載插件，而後 參見下面的配置，就能夠將js中的css文件提取，並以指定的文件名來進行加載。

npm install extract-text-webpack-plugin --save-dev

我發現這個有一個問題，就是他只能把css抽出來，可是sass的樣式不能分離出來。

var ExtractTextPlugin = require("extract-text-webpack-plugin");

3>建立index.html頁面插件

html-webpack-plugin

4>自動打開瀏覽器插件

open-browser-webpack-plugin

https://github.com/baldore/open-browser-webpack-plugin

5> 提取js公共部分插件

CommonsChunkPlugin

6> 提取公共文件

寫法二：

7>自定義公共模塊抽取

8>ProvidePlugin插件

自動添加引用插件，全局暴露插件，直接使用

9>刪除目錄插件

clean-webpack-plugin

10>拷貝文件插件

copy-webpack-plugin

11> 合併配置文件插件

webpack-config

https://github.com/mdreizin/webpack-config

12>定義生產環境

new webpack.DefinePlugin({
//去掉react中的警告，react會本身判斷
//
'process.env':{
    NODE_ENV:'"production"'//另外一個值是developer（自動幫你優化js代碼）
}
})

9.其餘知識：

 1.resolve屬性：（自動幫你處理文件的擴展名，建議本身都寫上文件擴展名）

webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴：

resolve: {
        //查找module的話從這裏開始查找
        root: '/pomy/github/flux-example/src', //絕對路徑
        
        //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
//注意一下, extensions 第一個是空字符串! 對應不須要後綴的狀況.
        extensions: ['', '.js', '.json', '.scss',’jsx’],
        
        //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//後續直接 require('AppStore') 便可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }

2. Externals屬性

 // externals: {
    //     // 配置了這個屬性以後react和react-dom這些第三方的包都不會被構建進js中，那麼咱們就須要經過cdn進行文件的引用了
    //     // 前邊這個名稱是在項目中引用用的，至關於import React from  ‘react1’中的react，
    //     //'react1':"react",
    //     'react1':"react",
    //     'react-dom1':"react-dom",
    //     '$1':"jQuery"
    //
    // },

外部依賴不須要打包進bundle，當咱們想在項目中require一些其餘的類庫或者API，而又不想讓這些類庫的源碼被構建到運行時文件中，這在實際開發中頗有必要。

好比：你在頁面裏經過script標籤引用了jQuery：<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>，因此並不想在其餘js裏再打包進入一遍，好比你的其餘js代碼相似：

其實就是否是經過require或者import引入的，而是直接寫在html中的js地址。

3.chunk(代碼分割)

代碼使用時纔會去下載，不使用不下載，減小網絡請求

http://webpack.github.io/docs/code-splitting.html

4.能夠在服務端用webpack

node+webpack

5.熱加載組件（不刷新瀏覽器就自動把新的東西更新出來）

http://fakefish.github.io/react-webpack-cookbook/Hot-loading-components.html

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