webpack4配置(3)-打包css/js/圖片等資源

時間  2019-11-06
標籤 webpack4 webpack 配置 打包 css 圖片 資源 欄目 CSS 简体版
原文   原文鏈接

打包css資源

使用loader

webpack可使用各類不一樣loader來預處理不一樣格式的資源。css

  1. 在項目目錄下添加文件：

編寫測試代碼 

// src/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
</body>
</html>
複製代碼
// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
}
複製代碼
  1. 安裝css-loader和style-loader
    css-loader負責讀取css文件，而後使用style-loader將css內容注入到js裏面去，最終是以style標籤的形式嵌入到Html代碼中
    npm i -D css-loader style-loader
  2. 更改配置文件
module:
{
    test: /\.css$/,
    use: [
        {
            loader:'style-loader',  //以style標籤的形式嵌入到html中
            options:{  
                insertAt:top   //嵌入位置，top指頂部，不會覆蓋掉html自帶的style樣式
            }
        }
        'css-loader'  //解析css文件
    ]
},
複製代碼

module使用方法：html

  • rules:一個數組，存放各類Loader
  • test:正則表達式，用來匹配不一樣的文件名後綴
  • loader:有多種使用方法
{
    test:/\.js$/,
    loader:'babel-loader'  //只有一個loader時
}
{
    test:/\.css$/,
    use:['style-loader','css-loader']  //多個loader,從右往左加載
}
{
    test:/\.css$/,
    use:[ 
        'style-loader',          //多個loader混合使用
        {                           //loader要設置相關參數時可使用對象
            loader:'css-loader',
            options:{
                minimize:true
            }
        }
    ]
}
複製代碼

使用插件MiniCssExtractPlugin

使用css-loader+style-loader的方式是將樣式打包進js文件，而後以style標籤的形式嵌入頁面。css樣式與js文件混在一塊兒可能致使一些樣式混亂，因此使用插件將css樣式統一打包進一個css文件，而後以link標籤的形式嵌入頁面進行資源請求。
webpack3一般使用的是ExtractWebpackPlugin,但在webpack4中已再也不支持，官方推薦使用MiniCssExtractPlugin進行替代。
首先安裝 ：
npm i -D mini-css-extract-plugin
修改配置文件webpack

const miniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'bundle.js',
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'[name].css'   //輸出的css文件名，放置在dist目錄下
        }) 
    ]
}
複製代碼

打開dist/index.html，能夠看到以link形式引入了css樣式。es6

自動添加前綴

咱們但願能夠給css自動添加瀏覽器前綴，可使用插件autoprefixer.web

  1. 首先安裝，npm i -D postcss-loader autoprefixer
  2. postcss-loader須要一個配置文件，在根目錄下新建postcss.config.js文件，寫入：
module.exports={
    plugins:[require('autoprefixer')]
}
複製代碼
  1. 配置loader
// webpack.config.js
{
    test: /\.css$/,
    use: [
        {
            loader:miniCssExtractPlugin.loader  //抽離成一個css文件
        },
        'css-loader',    //解析css
        'postcss-loader'   //先添加前綴
    ]
}
複製代碼
  1. 編寫css測試代碼
// src/css/style.css
.box{
    width:50px;
    height: 50px;
    background-color: pink;
    transform: rotateX(30deg);
}
複製代碼
  1. 打包npm run build後，打開dist/main.css，能夠看到tranform已經加上了webkit前綴。

壓縮css/js代碼

使用optimize-css-assets-webpack-plugin插件來壓縮css代碼。正則表達式

  1. 安裝 npm i -D optimize-css-assets-webpack-plugin
  2. 修改配置文件
// webpack.config.js

const opimizeCss=require('optimize-css-assets-webpack-plugin');

module.exports = {
    optimization:{   
        minimizer:[
            new opimizeCss()
        ]   
    },
    mode:'production'
    ....
}    
複製代碼
  1. npm run build之後打開main.css發現已經被壓縮，可是在默認環境爲production時自動壓縮的js代碼卻再也不壓縮了，咱們使用uglifyjs-webpack-plugin來壓縮js代碼。
  2. 安裝 npm i -D uglifyjs-webpack-plugin
  3. 修改配置文件
//webpack.config.js
const uglifyJsWebpackPlugin=require('uglifyjs-webpack-plugin')

module.exports = {
    optimization:{   
        minimizer:[
            new uglifyJsWebpackPlugin({
                cache:true,  //是否緩存
                parallel:true,  //是否併發打包，同時打包多個文件
                sourceMap:true  //打包後的代碼與源碼的映射，方便調試
            })
            ...
        ]
        ...
}        
複製代碼

es6轉es5

webpack裏面使用了大量的es6語法，咱們須要轉換爲es5,使用babel來完成此功能。npm

  1. 安裝babel npm i -D babel-loader @babel/core @babel/preset-env
  2. 配置loader
{
    test:/\.js$/,
    use:[
        {
            loader:'babel-loader',
            options:{
                presets:[
                    `@babel/preset-env`  //es6轉es5
                ]
            }
        }
    ]
}
複製代碼

打包圖片資源

在js中建立圖片引入

(1)引入的圖片須要在入口的js文件中import進去數組

// index.js

import img from './img/big.jpg';  //file-loader將該圖片放入到dist下，同時返回圖片的地址
var imgElement = document.createElement('img');
imgElement.src = img;
document.body.appendChild(imgElement);
複製代碼

(2)安裝file-loader並配置 npm i -D file-loader瀏覽器

// webpack.config.js

{
    test: /\.(png|jpg|gif|svg|jpeg)$/,
    loader: 'file-loader',
}
複製代碼

在css中中引入背景圖片

與js引入圖片用法相同，不過比起file-loader，更經常使用的是url-loader,能夠將小圖片直接base64編碼，減小http請求。 (1)安裝url-loader並配置 npm i -D url-loader緩存

// webpack.config.js

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        limit: 1024,  //小於該值的圖片會使用base64編碼
        name: '[name].[hash:8].[ext]'  //打包後的圖片名稱 [ext]指圖片格式
    }
}
複製代碼

直接在html寫入標籤

// src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <div class="box"></div>
    <img src="./img/big.png">
</body>
</html>
複製代碼

打包後發現該圖片的地址是寫死的，並不會相對於dist，致使沒法找到該圖片，使用html-withimg-loader來處理html中的圖片。
安裝並配置 npm i -D html-withimg-loader

// webpack.config.js
{
    test:/\.html$/,
    loader:'html-withimg-loader'
}
複製代碼

再次打包運行後發現能夠正確加載圖片了。

配置不一樣的資源路徑

如今這種配置下，全部的資源都放置在dist目錄下，看起來很混亂，咱們但願js在js文件夾下，css在css文件夾下，圖片在img文件夾下，修改相關配置。

//webpack.config.js

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename:'js/bundle.js', //給打包輸出的js添加一層目錄
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    {
                        loader:miniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'postcss-loader'  
                ]
            },
            {
                test:/\.js$/,  //最後會打包進輸出的js的文件，因此不須要配置路徑
                use:[
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                `@babel/preset-env`
                            ]
                        },
                    }
                ]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[hash:8].[ext]',
                    //不能經過名字添加路徑，由於背景圖片還會被css處理一次，會再添加上css的路徑
                    //最後就會變成 css/img/big.1763821.png
                    outputPath:'img/',  //經過該屬性設置，打包輸出的路徑多一層
                    publicPath:'http://cdn.com'  //圖片的訪問路徑爲 http://cdn.com/img/big.561361.png
                },
                
            },
            {
                test:/\.html$/,
                loader:'html-withimg-loader',  //會加上url-loader裏的outputPath
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new miniCssExtractPlugin({
            filename:'css/[name].css'  //經過名字添加一層路徑
        }),
        new cleanWebpackPlugin()
    ]
}
複製代碼

最終npm run build後，就能夠有不一樣的文件夾，同時index.html也正確處理了路徑。

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