(9/24) 圖片跳坑大戰--css分離與圖片路徑處理

時間 2019-11-08

標籤圖片大戰 css 分離路徑處理欄目 CSS 简体版

原文原文鏈接

前言：

在上一節當中，咱們把小圖片打包成Base64格式（打包到了js當中）。咱們也算是對webpack對圖片的打包有個基本瞭解。css

本節咱們準備把css從JavasScript代碼中分離出來,這會遇到兩個問題，一是如何分離，二是分離以後的圖片路徑問題，下面咱們逐一破解。html

1.把css從JavasScript代碼中分離出來

有些簡單的交互頁面中，你的JavasScript頁面代碼會很是少，而大部分代碼都在CSS中，這時爲了便於對css的維護，就須要把css單獨提出來，以便修改維護。webpack

這裏使用到extract-text-webpack-plugin插件。git

1.1.插件安裝

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

1.2.插件引入

安裝完成後，須要在webpack.config.js中先用require引入。github

const extractTextPlugin = require("extract-text-webpack-plugin")

1.3.設置plugins

引入成功後須要在webpack.config.js中的plugins屬性中進行配置。這裏只要new一下這個對象就能夠了。web

new extractTextPlugin("css/index.css")

這裏的/css/index.css是分離後的路徑位置。配置完成後，須要在包裝代碼：還要修改原來咱們的style-loader和css-loader。npm

1.4.使用插件包裝代碼

修改代碼以下，同時把limit值修改小一點，不打包成base64。此處咱們爲了使打包後的圖片直接放到images目錄下，對url-loader進行一下配置。json

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500,
　　　　　　　　　　　　　　outputPath:'images/'//打包到images目錄下

                   }
               }]
            }
          ]
    },

1.5.打包

完成上邊步驟後，使用webpack命令進行打包。webpack-dev-server

webpack

1.6. 啓動服務

打包完成後，使用npm run server 啓動服務。ide

此時咱們訪問http://localhost:1818/發現咱們的圖片不見了，這是因爲打包後的圖片路徑出了問題，下面咱們就來解決這個問題。

2.圖片路徑問題

利用extract-text-webpack-plugin插件很輕鬆的就把CSS文件分離了出來，可是CSS路徑並不正確，其中一種解決辦法爲使用publicPath解決。

publicPath：是在webpack.config.js文件的output選項中，主要做用就是處理靜態文件路徑的。

2.1.聲明對象

在處理前，咱們在webpack.config.js 上方聲明一個對象，叫open_path。

var open_path ={
    publicPath:"localhost:1818/"
}

注意，這裏的IP和端口，是你本機的ip或者是你devServer配置的IP和端口。

2.2配置output

而後在output選項中引用這個對象的publicPath屬性

//出口文件的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'[name].js',
        publicPath:open_path.publicPath
    },

2.3 打包+啓動服務

配置完成後，再使用webpack命令進行打包，而後用npm run server啓動服務，你會發現原來的相對路徑改成了絕對路徑，同時訪問http://localhost:1818/咱們發現圖片能正常顯示了。

本節源碼：

index.html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>webpack</title>
 8 </head>
 9 <body>
10 <div id="img"></div>
11 <div id="title"></div>
12 </body>
13 </html>

View Code

entry.js:

1 import css from './css/index.css'
2 document.getElementById('title').innerHTML='Hello Webpack';

View Code

css/index:

 1 body{
 2     background-color: #018eea;
 3     color: red;
 4     font-size: 32px;
 5     text-align: center;
 6 }
 7 #img{
 8     background-image: url(../images/webapck.jpg);
 9     width:271px;
10     height:285px;
11 }

View Code

webpack.config.js:

 1 const path = require('path');
 2 const uglify = require('uglifyjs-webpack-plugin');
 3 const htmlPlugin= require('html-webpack-plugin');
 4 const extractTextPlugin = require("extract-text-webpack-plugin");
 5 var website ={
 6     publicPath:"http://localhost:1818/"
 7 }
 8 module.exports={
 9     //入口文件的配置項
10     entry:{
11         entry:'./src/entry.js',
12         //這裏咱們又引入了一個入口文件
13         entry2:'./src/entry2.js',
14     },
15     //出口文件的配置項
16     output:{
17         //輸出的路徑，用了Node語法
18         path:path.resolve(__dirname,'dist'),
19         //輸出的文件名稱
20         filename:'[name].js',
21         publicPath: website.publicPath
22     },
23     //模塊：例如解讀CSS,圖片如何轉換，壓縮
24     module:{
25         rules: [
26             {
27                 test: /\.css$/,
28                 use: extractTextPlugin.extract({
29                     fallback: "style-loader",
30                     use: "css-loader"
31                 })
32             },
33             {
34                 test:/\.(png|jpg|gif)/,
35                 use:[{
36                     loader:'url-loader',
37                     options:{
38                         limit:50,
39                         outputPath:'images/'//圖片打包到images下
40                     }
41                 }
42                 ]
43             }
44         ]
45     },
46     //插件，用於生產模版和各項功能
47     plugins:[
48         // new uglify(),
49         new htmlPlugin({
50             minify:{
51                 removeAttributeQuotes:true
52             },
53             hash:true,
54             template:'./src/index.html'
55         }),
56         new extractTextPlugin("css/index.css")
57     ],
58     //配置webpack開發服務功能
59     devServer:{
60         contentBase:path.resolve(__dirname,'dist'), //絕對路徑
61         host:'localhost',
62         compress:true,
63         port:1818
64     }
65 }

View Code

package.json:

 1 {
 2   "name": "webpack3",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "server": "webpack-dev-server"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC",
12   "devDependencies": {
13     "css-loader": "^2.0.0",
14     "extract-text-webpack-plugin": "^3.0.0",
15     "file-loader": "^2.0.0",
16     "html-webpack-plugin": "^3.2.0",
17     "style-loader": "^0.23.1",
18     "url-loader": "^1.1.2",
19     "webpack": "^3.6.0",
20     "webpack-dev-server": "^2.9.7"
21   }
22 }

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。