（一）webpack配置loader，打包js和sass以及圖片檔案

阿新 • • 發佈：2019-01-16

什麼是webpack？

模組打包工具，它可以分析專案結構，處理js依賴模組以及編譯一些sass、less、typescript等語法，並將其打包成合適的格式供瀏覽器能夠使用。

工作方式：

webpack把我們的專案當做整體，他可以通過給定的一個主檔案（入口檔案）找到專案中所有依賴的檔案，通過loader處理他們並將他們打包成一個瀏覽器可識別的js檔案搭建webpack專案：/全域性安裝（建議全域性安裝）
npm install -g webpack
//安裝到你的專案目錄
npm install --save-dev webpack
//使用
webpack {entry file/入口檔案} {destination for bundled file/存放bundle.js的地方}

//webpack非全域性安裝的情況需要指定webpack的安裝路徑
node_modules/.bin/webpack app/main.js public/bundle.js

以上使用的方式操作複雜，使用起來容易出錯。一般使用配置檔案：專案下新建webpack.config.js檔案:

module.exports = {//暴露一個物件出去，webpack去讀
        entry: __dirname + "/main.js", //唯一入口檔案，__dirname是nodejs的一個全域性變數，它指向當前執行指令碼所在的目錄（全路徑，計算機絕對路徑）
        output: {
            path: __dirname + "/public",//指定打包輸出的目錄(自動生成)
            filename: "bundle.js"//指定打包輸出的檔名稱
        },
        //生成source-map供瀏覽器去讀，對映原始檔分離展示方便除錯,用'#source-map'也可以
        devtool: "#cheap-module-eval-source-map",
        //配置loader來處理檔案
        module: {
            rules: [{//一個loader的具體配置
                test: /\.scss$/,//匹配的檔案型別
                use: [{//loader處理的順序是該陣列中從右到左的順序
                    loader: 'style-loader'//將 JS 字串生成為 style 節點
                },{
                    loader: 'css-loader'//將 CSS 轉化成 CommonJS 模組
                },{
                    loader: 'sass-loader'//將sass編譯成css
                }]
            },{
                test: /\.(png|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {//配置額外引數
                        limit: 1024, //限制轉base64的圖片為1k(1024b)，超過1k的以url返回,設定此項需要安裝依賴：file-loader，會將圖片傳到public下
                        outputPath: 'img/' //指定輸出路徑：放到public下的img檔案下，如果沒有則會自動新建,並且路片路徑自動變成img/***.***
                    }
                }]
            }]
        }
}

目錄結構（public檔案以及下面所有檔案應該都是由webpack生成的）：

module2.js

module.exports = "font-weight: bold; color: green";

module1.js

let cssText = require("./module2");
module.exports = dom => (dom.style.cssText = cssText);

main.js

let cssModule = require("./src/js/module1");//module1中引用了module2
let cssFile = require("./src/sass/test.scss");//需要sass-loader（依賴node-sass）、css-loader、style-loader
//如果是less則是less-loader（依賴less）、css-loader、style-loader
let imgFile = require("./src/img/dog.png");

let dom = document.querySelector("#box"), img = document.querySelector("#img");
cssModule(dom);
img.src = "public/"+imgFile;
console.log(imgFile);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        my first webpack!!
        <img id="img" src="">
    </div>
<script src="public/bundle.js"></script>
</body>
</html>

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^2.7.0"
  }
}

（一）webpack配置loader，打包js和sass以及圖片檔案

什麼是webpack？

工作方式：

（一）webpack配置loader，打包js和sass以及圖片檔案

JAVA伴我行——專案篇（一）：開發模型，敏捷開發和瀑布模型的結合

JNI開發（一）簡單的C程式碼打包成SO庫以及專案如何呼叫SO庫

React + Webpack多入口打包配置（一）基礎配置快速打包，優化打包速度

Vue2+VueRouter2+webpack 構建項目實戰（三）：配置路由，運行頁面

[ webpack4 ] 配置屬於自己的打包系統教程（一）—— 基礎配置篇

Android-Universal-Image-Loader 學習筆記（一）基本配置與使用

salesforce 零基礎開發入門學習（一）Salesforce功能介紹，IDE配置以及資源下載

（一）環境配置

Redis（一）安裝配置

Django學習（一）---基本配置及創建項目、應用

springmvc學習筆記（一） -- 從零搭建，基礎入門

Angular入門（一）環境配置

Python學習記錄——Ubuntu（一）基本配置、快捷鍵和文件操作命令行

Python學習記錄——Ubuntu（一）基本配置、快捷鍵和系統啟停命令行

持續集成（一）git配置

Maven學習之（一）基本配置

基於樹莓派（Raspberry Pi）平臺的智能家居實現（一）----繼電器模塊，DHT11模塊

axios封裝（一）基礎配置

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

（一）webpack配置loader，打包js和sass以及圖片檔案

什麼是webpack？

工作方式：

相關推薦