Webpack 4.X 從入門到精通 - module（四）

時間  2019-11-10
標籤 webpack 4.x 入門 精通 module 简体版
原文   原文鏈接

概念

在webpack中任何一個東西都稱爲模塊，js就不用說了。一個css文件，一張圖片、一個less文件都是一個模塊，都能用導入模塊的語法（commonjs的require，ES6的import）導入進來。webpack自身只能讀懂js類型的文件，其它的都不認識。可是webpack卻能編譯打包其它類型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要編譯打包這些文件就須要藉助loaderjavascript

loader就像是一個翻譯員，瀏覽器不是不認識這些東西麼?那好交給loader來辦，它能把這些東西都翻譯成瀏覽器認識的語言。loader描述了webpack如何處理非js模塊，而這些模塊想要打包loader必不可少，因此它在webpack裏顯得異常重要。loader跟插件同樣都是模塊，想要用它須要先安裝它，使用的時候把它放在module.rules參數裏，rules翻譯過來的意思就是規則，因此也能夠認爲loader就是一個用來處理不一樣文件的規則css

文件目錄

這節課須要用到圖片跟樣式，因此我要按傳統的目錄結構來建立目錄，目錄以下
結構目錄
圖4-1html

處理CSS

所需loader

style-loader   //把處理完的css放到style標籤裏
css-loader     //處理css

安裝

npm i style-loader css-loader -D

index.css文件內容以下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    background: green;
}

index.js文件內容以下：

import '../css/index.css';    //兩個點是找上級目錄

經過前面的課程你們要明白，webpack的入口文件是index.js，若是要處理其它類型的文件，就須要在入口文件裏把其它類型的文件導入進來，而在webpack中全部文件都是模塊，因此可使用require或者import導入其它文件java

package.json文件內容以下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

webpack.package.json文件內容以下：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        index:'./src/js/index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html',
        })
    ],
    devServer:{
        host:'localhost',
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/\.css$/,  //以點開始css結尾的文件
                use:['style-loader','css-loader']   //順序不能搞錯
            }
        ]
    },
}

執行命令npm run dev後就能夠看到效果webpack

說明git

  1. rules裏的數據類型爲對象，每個loader都是一個對象
  2. test表示loader要處理什麼類型的文件，這裏用了一個正則去匹配文件類型
  3. use表示要使用哪一個loader，它的值是個數組，loader的使用順序是從後往前
  4. 這個loader的意思爲，在入口文件裏找到.css類型的文件，先拿css-loader去處理成瀏覽器認識的css，再拿style-loader把處理後的css放在頁面的style標籤裏

css-loader其它配置：https://www.webpackjs.com/loa...
style-loader其它配置：https://www.webpackjs.com/loa...github

單獨提取CSS

執行命令npm run build後，在dist目錄裏只有兩個文件，一個index.bundle.js一個index.html文件，並無css文件，同時打開index.html源碼後也沒有發現有css的內容。這是由於style-loader的做用，它把css一同打包到了js文件裏，js文件在能過DOM動態建立style標籤並添加到頁面裏。因此css的內容已經放到了index.bundle.js裏。
圖4-2web

這種形式只有當文件內容很少的時候可使用，若是CSS的內容以及JS的內容很是的多，把兩塊都打包到一個文件裏就會增長文件的體積，用戶打開頁面的時候下載速度會受影響，同減肥影響用戶體驗。這就須要把CSS文件單獨拎出來，那須要一個插件來配合loader才能完成npm

mini-css-extract-plugin

webpack版本須要4.3以上，低版本請使用extract-text-webpack-plugin
使用步驟：
一、安裝json

npm i mini-css-extract-plugin -D

二、在webpack.config.js裏引入模塊

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

三、寫入plugins

plugins:[
    new HtmlWebpackPlugin({
        title:'陳學輝',
        template:'./src/template.html',
        filename:'index.html',
    }),
    new MiniCssExtractPlugin({
        filename:'css/index.css'    //文件目錄會放入output.path裏
    }),
]

四、寫入loader

module:{
    rules:[
        {
            test:/\.css$/,
            use:[MiniCssExtractPlugin.loader,"css-loader"]  //代替style-loader
        }
    ]
}

執行命令npm run build後能夠看到dist目錄裏已經多了一個css文件夾，這個文件夾裏放了一個index.css文件。打開index.html源碼看到css文件已經經過link標籤引入，這些功能都是mini-css-extract-plugin所作的
圖4-3
圖4-4

mini-css-extract-plugin其它配置：https://github.com/webpack-co...

處理圖片

所需loader

file-loader   //解析地址
url-loader    //把圖片地址解析成base64

安裝

npm i file-loader url-loader -D

index.css文件內容以下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    /*background: green;*/
    
    background: url(../images/img_01.jpg);  //背景改爲了圖片
}

index.js文件內容以下：

import '../css/index.css';    //兩個點是找上級目錄

webpack.package.json文件內容以下：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:{
        index:'./src/js/index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html',
        })
    ],
    devServer:{
        host:'localhost',
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/\.css$/,  //以點開始css結尾的文件
                use:[
                    //這是一個loader，若是loader須要給參數，就寫成對象的形式
                    {
                        loader:MiniCssExtractPlugin.loader, //loader是哪一個
                        options:{   //全部的配置參數都要放在這個對象裏面
                            publicPath:'../'    //這個表示在css文件裏但凡用到地址的地方在其前面加個目錄'../'，這個是爲了能找到圖片
                        }
                    },
                    'css-loader'    //這個loader沒有其它選項就直接寫
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,    //找到三種格式中的任意一種
                use:['file-loader']
            }
        ]
    },
}

執行命令npm run dev後就能夠看到效果

說明

  1. loader既能夠寫成字符串的形式，也能夠寫成對象的形式。若是這個loader須要給一些配置，那就須要寫成對象的形式，全部的配置放到options裏
  2. 這裏必定要注意第一個loader的use屬性，它裏面放的是一個個loader，每一個loader的值既能夠是對象形式，又能夠是字符串形式

file-loader其它配置：https://www.webpackjs.com/loa...

在HTML文件中使用圖片

index.js文件內容以下：

import '../css/index.css';

import img1 from '../images/img_01.jpg';
import img2 from '../images/img_02.jpg';

const loadImg=img=>{
    const newImg=new Image();
    newImg.onload=()=>document.body.appendChild(newImg);
    newImg.src=img;
};

loadImg(img1);
loadImg(img2);

webpack.package.json文件內容以下：

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    entry:{
        index:'./src/js/index.js',
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'陳學輝',
            template:'./src/template.html',
            filename:'index.html',
        }),
        new MiniCssExtractPlugin({
            filename:'css/index.css'
        }),
    ],
    devServer:{
        host:'localhost',
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                //use:['file-loader']
                use:[
                    {
                        loader:'url-loader',    //把圖片轉成base64
                        options:{
                            limit:50*1024,    //小於50k就會轉成base64
                            outputPath: 'images'
                        }
                    }
                ]
                
                //use:'url-loader?limit=50000&outputPath=images'    //loader的另外一種寫法，與get請求方式相同
            }
        ]
    },
}

執行命令npm run dev後就能夠看到效果

說明

  1. url-loader的做用是把圖片轉成base64，它一樣能夠給配置參數
  2. limit的做用是小於這個值就會轉base64
  3. 只用了url-loader，並無用file-loader，說明url-loader裏已經包含了file-loader的功能
  4. loader還能夠寫成地址的形式，與get的請求方式相同

圖4-5
url-loader其它配置：https://www.webpackjs.com/loa...

資料下載：https://pan.baidu.com/s/1tgNt...

下一篇：Webpack 4.X 從入門到精通 - loader（五）

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