天天看點

(一)webpack配置loader,打包js和sass以及圖檔檔案

什麼是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生成的):

(一)webpack配置loader,打包js和sass以及圖檔檔案

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 >
<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"
  }
}