Vue--webpack打包css、image資源

本文轉載自查看原文 2020-01-09 20:44 336 Vue

前戲

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要結合插件來使用，這些插件在Webpack 中被稱為 Loader （加載器）來進行轉換。

Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，參數接受的是源文件，返回值是轉換后的結果。

這樣，我們就可以通過 require 或 import 來加載任何類型的模塊或文件，比如 CSS、圖片。

打包css資源

要打包css資源，要安裝 style-loader 和 css-loader 依賴

css-loader 是將 css 裝載到 javascript；

style-loader 是讓 javascript 認識 css

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

修改webpack.config.js文件，增加model參數

// 引入node中的path模塊，處理文件路徑 的小工具
const path = require('path')

// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模塊文件路徑 
    // 出口
    output: {
        // path: './dist/', 錯誤的，要指定絕對路徑
        path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
        filename: 'bundle.js' 
    },
    module: { // 模塊
            rules: [ // 規則
             {
                test: /\.css$/, // 正則表達式，匹配 .css 文件資源,不要加引號
                use: [  // 使用的 Loader ,注意順序不能錯
                  'style-loader',
                  'css-loader'
               ]
             }
           ]
         }
}

在src文件夾創建 css 文件夾, css文件夾下創建 style.css

style.css

body {
    background: red;}

在 main.js 只引入 style.css

// 模塊方式導入 css , 最終會打包成js，打包在 bundle.js 中
import './css/style.css'

重新打包編譯

npm run build

打包后，查看 bundle.js ，發現已經將 css 樣式以 js 方式引入了

訪問 index.html , 看看背景是不是變成紅色

<!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>
    <script src="./dist/bundle.js"></script>
</body>
</html>

index.html

F12查看 index.html 源碼后，其實是將 CSS 文件內容轉成一個 JavaScript 模塊，然后在運行 JavaScript 時，會將樣式動態使用 <sytle> 標簽作用在頁面 <head> 標簽下

打包image資源

安裝 file-loader 依賴

npm install --save-dev file-loader

修改 webpack.config.js

// 引入node中的path模塊，處理文件路徑 的小工具
const path = require('path')

// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模塊文件路徑 
    // 出口
    output: {
        // path: './dist/', 錯誤的，要指定絕對路徑
        path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
        filename: 'bundle.js' 
    },
    module: { // 模塊
            rules: [ // 規則
             {
                test: /\.css$/, // 正則表達式，匹配 .css 文件資源,不要加引號
                use: [  // 使用的 Loader ,注意順序不能錯
                  'style-loader',
                  'css-loader'
               ]
             },
             {
                test: /\.(png|svg|jpg|gif)$/,  // 匹配圖片資源
                use: 
                   [
                      'file-loader'
                  ]
             }
           ]
         }
}

把1.jpg放在css文件夾下

修改 style.css

body{
    background: red;
    background-image: url(./1.jpg)
    }

打包編譯

npm run build

訪問根目錄下的 index.html , 背景圖並未顯示出來

問題：

如果直接訪問根目錄下的 index.html ，那么圖片資源路徑就無法訪問到。
解決方案：就是把 index.html 放到 dist 目錄中。
但是 dist 是打包編譯的結果，而非源碼，所以把 index.html 放到 dist 就不合適。
而且如果我們一旦把打包的結果文件名 bundle.js 改了之后，則 index.html 也要手動修改。
綜合以上遇到的問題，可以使用一個插件： html-webpack-plugin 來解決。

使用 HtmlWebpackPlugin 插件

現在的目錄結構

作用：解決文件路徑問題

將 index.html 打包到 bundle.js 所在目錄中

同時也會在 index.html 中自動的 <script> 引入 bundle.js

安裝插件

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

修改 webpack.config.js

// 引入node中的path模塊，處理文件路徑 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 導出一個webpack具有特殊屬性配置的對象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模塊文件路徑 
    // 出口
    output: {
        // path: './dist/', 錯誤的，要指定絕對路徑
        path: path.join(__dirname, './dist/'), //打包的結果文件生成的目錄要是絕對路徑
        filename: 'bundle.js'
    },

    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 指定要打包的模板頁面
            // 就會將 index.html 打包到與 bundle.js 所在同一目錄下面，
            // 同時在 index.html 中會自動的使用script 標簽引入bundle.js
            template: './index.html'
        })
    ],
    
    module: {
        rules: [ //配置轉換規則
            {
                test: /\.css$/, // 注意，不要有單引號，正則表達 式，匹配 .css 文件資源 
                use: [
                    // 根據外國人的習慣來的順序，而且順序不要寫錯
                    'style-loader', // js識別css
                    'css-loader' // css 轉換為 js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }


}

修改 index.html, 模擬下vue頁面

<!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>
    <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手動的引入bundle.js,
    因為它會自動的將它引入 -->
    <!-- <script src="./dist/bundle.js"></script> -->
    <div id="app"></div>
</body>
</html>

重新打包

npm run build

運行后，你會發現 dist 目錄下多有一個 index.html , 並且文件中自動引入了 bundle.js

<!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>
    <!-- 配置了HtmlWebpackPlugin 插件之后 ，不需要手動的引入bundle.js,
    因為它會自動的將它引入 -->
    <!-- <script src="./dist/bundle.js"></script> -->
    <div id="app"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

運行 dist/index.html 文件，背景圖正常顯示了。不要運行了根目錄下的 index.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue--webpack打包js文件 VUE打包發布后無法訪問js、css資源 webpack打包vue vue的webpack打包步驟 webpack分離css單獨打包 webpack 打包CSS 引入圖片 webpack2 css打包沒有壓縮 vue引入外部.css文件，webpack將其與.vue中的樣式混合打包了，怎么辦？ webpack打包圖片資源找不到問題 webpack4-生產環境打包靜態資源