Webpack學習-Webpack初識

時間  2019-12-13
標籤 webpack 學習 简体版
原文   原文鏈接

1、前言　javascript

　　　webpack 究竟是個什麼東西呢，看了一大堆的文檔，沒一個能看懂的，由於上來就是給個module.exports 而後列一大堆配置，這個幹啥，那個幹啥，沒一點用。但凡要用一個東西，一個東西火了，首先得知道爲何要用它，它到底是來幹什麼的，它有什麼好處。webpack 顧名思義，就是web打包，主要是打包一些前端資源的，再通俗點講，就是把前端用的一些js,css壓縮混淆，images fonts什麼的也作相應處理，這只是webpack其中的一點功能，對於初學者來講，先知道這些就好了。css

　　由於webpack是基於nodejs開發的一個前端打包工具，因此許多後端人員若是想學的話是比較吃力的，須要先學習一下nodejs，否則其中的一些語法什麼都看不懂，一頭霧水。webpack還有其餘一些功能，也是比較重要的，好比：模塊化開發，把全部資源都當成一個模塊，用import的方式引入相關js中，甚至連css ,img 都引入進去，這一點也是讓我比較吃驚的，具體裏邊怎麼加載到頁面上的我也不知道，之後學了再看。html

2、起步前端

　　2.1 webpack的兩種安裝方式java

　　　　1.在cmd下或者其餘命令行工具下運行 npm i webpack -g  全局安裝webpack,這樣 安裝完成以後 在命令行工具下輸入webpack就會起做用。node

　　　　2.在項目根目錄運行 npm i webpack --save-dev 安裝到項目的依賴中jquery

　　　2.2 使用webpack打包構建一個項目webpack

　　　　1.新建一個文件夾叫webpack-study，在該目錄下執行命令npm init -y,會生成package.json 文件，就是基於webpack的整個項目的配置文件，如圖：
es6

　　　　

　　　　這裏邊包括 項目名稱，版本號，描述web

　　　　項目入口文件：index.js，webpack默認是會直接運行這個index.js文件 而後執行一系列的代碼，這裏和nodejs的思想是同樣的。

　　　　腳本代碼：scripts 這是項目啓動時能夠運行的腳本代碼，你也能夠添加別的代碼,

　　　　其餘的就不說了。

 　　　  2.建立項目的基本目錄，以下所示，很簡單的幾個文件

　　　　

　　　　3. 使用 npm i jquery --save 安裝jquery類庫

　　　　4.寫代碼

　　　　　在index.html中寫一個ul li列表　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>
</html>
  • 　在index.js頁面中寫
  • 　　 
    // 導入jquery類庫
import $ from 'jquery' 
//webpack 使用模塊化開發 這裏用import 語法 從jquery中導出一個模塊 咱們給他起個名字叫$ 接下來咱們就能夠像咱們傳統使用jquery同樣使用它了
console.log($)
// 設置偶數行背景色，索引從0開始，0是偶數
$('#list li:even').css('backgroundColor','lightblue');
// 設置奇數行背景色
$('#list li:odd').css('backgroundColor','pink');

     接下來咱們把index.js引入到index.html 頁面 ，直接在瀏覽器打開，而後就報錯了，是由於瀏覽器如今還不認識 import語法，雖然在es6的標準中已經提到了，可是他們還不支持。

  • 　　 

    　　   因此咱們就不能直接引入這個index.js了，由於用了高級的語法，咱們要用webpack對它打包處理一下，變成瀏覽器能識別的js。

    • 運行 webpack .\src\index.js -o  .\dist\bundle.js，意思是把src下邊的index.js 打包到dist下的bundle.js ，執行結果以下：dist下邊生成了一個bundle.js，內容一大坨，不知道什麼玩意。

    • 接下來咱們在index.html頁面引入bundle.js,成功輸出並顯示。

       

    •  

    •  以上就是webpack 最簡單的使用方式。webpack不只能打包js,包括css,img 等不少靜態資源都能打包，還有不少的第三方插件，幫助前端頁面優化，配置。一下簡單說一下就再也不演示了 

　　2.3 實現webpack的實時打包構建

  1. 因爲每次從新修改代碼以後，都須要手動運行webpack打包的命令，比較麻煩，因此使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼以後，會自動進行打包構建。
  2. 運行cnpm i webpack-dev-server --save-dev安裝到開發依賴
  3. 安裝完成以後，在命令行直接運行webpack-dev-server來進行打包，發現報錯，此時須要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現能夠進行實時打包，可是dist目錄下並無生成bundle.js文件，這是由於webpack-dev-server將打包好的文件放在了內存中
  • 把bundle.js放在內存中的好處是：因爲須要實時打包編譯，因此放在內存中速度會很是快
  • 這個時候訪問webpack-dev-server啓動的http://localhost:8080/網站，發現是一個文件夾的面板，須要點擊到src目錄下，才能打開咱們的index首頁，此時引用不到bundle.js文件，須要修改index.html中script的src屬性爲:<script src="../bundle.js"></script>
  • 爲了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可使用--contentBase src指令來修改dev指令，指定啓動的根目錄： 
    "dev": "webpack-dev-server --contentBase src" 同時修改index頁面中script的src屬性爲<script src="bundle.js"></script><script src="bundle.js"></script>

　  2.4 使用html-webpack-plugin插件配置啓動頁面

　　　因爲使用--contentBase指令的過程比較繁瑣，須要指定啓動的目錄，同時還須要修改index.html中script標籤的src屬性，因此推薦你們使用html-webpack-plugin插件配置啓動頁面.

  1. 運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
  2. 修改webpack.config.js配置文件以下：
   // 導入處理路徑的模塊
    var path = require('path');
    // 導入自動生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }
  1. 修改package.json中script節點中的dev指令以下："dev": "webpack-dev-server"
  2. 將index.html中script標籤註釋掉，由於html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！

　　2.5 實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

　　　　修改package.json的script節點以下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號爲4321，--hot表示啓用瀏覽器熱更新："dev": "webpack-dev-server --hot --port 4321 --open"

　　 2.6 使用webpack打包css文件

  1. 運行cnpm i style-loader css-loader --save-dev
  2. 修改webpack.config.js這個配置文件：{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

　 　2.7 使用webpack打包sass文件

  1. 運行cnpm i sass-loader node-sass --save-dev
  2. 在webpack.config.js中添加處理sass文件的loader模塊：{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

 　   2.8 使用webpack處理css中的路徑

  1. 運行cnpm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加處理url路徑的loader模塊：{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  3. 能夠經過limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片纔會進行base64編碼：{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

　　 2.9 使用babel處理高級JS語法

  1. 運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
  2. 運行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
  3. 在webpack.config.js中添加相關loader模塊，其中須要注意的是，必定要把node_modules文件夾添加到排除項：{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  4. 在項目根目錄中添加.babelrc文件，並修改這個配置文件以下：
　　{
   　　 "presets":["es2015", "stage-0"], 　　 "plugins":["transform-runtime"] 　　}

3、webpack中的配置文件　　　

　　　3.1 webpack.config.js

　　　　按照以上打包方式確定太麻煩，還沒牽扯到配置什麼的，若是文件太多就更麻煩。因此，webpack提供了一個配置文件，打包的時候webpack會自動找到目錄下邊的webpack.config.js ，它裏邊須要用nodejs的語法導出一個配置對象，這樣webpack就會根據這個對象對目錄下邊你配置過的資源打包了。下面咱們先來簡單配置一波，實現咱們前邊的功能，添加一個webpack.config.js文件，寫入下面內容:

const path = require('path')

module.exports ={
    entry:{
        index:path.join(__dirname,'./src/index.js')
    },
    output:{
        path: path.join(__dirname, './dist'),
        filename: 'js/[name].js'
    }
}

 　直接在根目錄下運行webpack 命令，就完成了咱們剛纔的功能。

　　　　

　　3.2 項目中的其餘文件

　　　　簡單說一下：

　　　　dist：使用 webpack -p 命令後，會把相關配置的文件所有打包到這下面，也就是咱們對外發布的目錄。

　　　　package.json ：使用 npm init -y 後生成的項目配置文件，學過nodejs的應該都是知道，這裏邊不只有項目本身的配置，還有包的相關依賴啥的，至關於咱們asp.net 中的Web.config、App.config，java中的web.xml等等。　　

{
  "name": "05",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack-dev-server": "^3.1.4"
  },
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

　package-lock.json： npm 4 以上會生成這個文件，裏邊各類包的依賴清晰明瞭，包的版本號也被鎖定，當你從新安裝或者還原node_modules文件夾時，之前是從package.json中解析依賴的比較耗時，並且版本號能夠會 恢復的包的最新版本，如今是根據這個文件直接讀取依賴關係並還原相關版本。

{
  "name": "05",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@webassemblyjs/ast": {
      "version": "1.5.13",
      "resolved": "http://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.5.13.tgz",
      "integrity": "sha1-gRVaVwvVgDow7DFDa8LJwO3jjyU=",
      "dev": true,
      "requires": {
        "@webassemblyjs/helper-module-context": "1.5.13",
        "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
        "@webassemblyjs/wast-parser": "1.5.13",
        "debug": "3.1.0",
        "mamacro": "0.0.3"
      }
    },
    .....
}

　webpack.config.js ：是webpack打包的配置文件

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },{
            test:/.(jpg|png|bmp|gif)$/,
            use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
        },{
            test:/.(eot|svg|ttf|woff|woff2)$/,
            use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
        }]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ]
}

　　3.3 經常使用命令

npm i webpack -g  //全局安裝webpack
npm i webpack --save-dev // 本地項目安裝webpack 要與全局安裝配置使用
npm i nrm - g  //全局安裝 nrm 能夠選擇 nrm 的包地址 
npm i cnpm -g  // 全局安裝cnpm 和npm差很少 比較快
npm i webpack-dev-server -g //全局安裝dev-server 模擬服務器
webpack -p //按配置打包到dist 目錄中
//PS: -S就是--save的簡寫，-D就是--save-dev 這樣安裝的包的名稱及版本號就會存在package.json的devDependencies這個裏面，而--save會將包的名稱及版本號放在dependencies裏面4、

4、總結

　　關於webpack的使用這裏只介紹一下它是什麼，它能幹什麼，它有什麼好處。也能讓咱們最起碼知道，具體深刻，之後本身找時間玩。

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