webpack4(02)

時間  2019-12-10
標籤 webpack4 webpack 简体版
原文   原文鏈接

開發

上節的例子中，咱們使用插件自動引入了打包後的文件，每當咱們修改源文件後，咱們想查看修改後的效果都要打包，刷新瀏覽器，若是修改後能實時的顯示效果就行了，能夠嘗試使用 webpack-dev-server，剛好能夠實現咱們想要的功能。css

webpack-dev-server

安裝html

npm install --save-dev webpack-dev-server

my.config.jsnode

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
+   devServer: {
+       contentBase: './dist',
+   },
    plugins: [
        new HtmlWebpackPlugin()
    ],
}

package.jsonwebpack

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config my.config.js",
    +   "dev": "webpack-dev-server --config my.config.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.3.1"
    }
}

運行npm run dev,成功後就能夠在控制檯看到相應的信息，而後瀏覽器打開http://localhost:8080/，修改源文件index.js文件的輸出，而後瀏覽器就會自動刷新，顯示對應的變化。webpack-dev-server 帶有許多可配置的選項。點擊這裏查看更多。css3

管理資源

加載css

首先對文件作以下修改,新增一個css文件，而後再index.js文件中引入。web

webpack-demo
    package.json
    my.config.js   
+   index.html
    /src
        index.js
+       style.css

index.htmlnpm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="hello">
            hello,qzy
        </div>
    </body>
</html>

style.cssjson

.hello{
    color: red;
}

my.config.js數組

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
+           template:'./index.html'
        })
    ],
}

index.js瀏覽器

console.log('qzy');
+ require('./style.css')

這時控制檯會報出以下錯誤，你須要一個合適的loader來處理此文件。

You may need an appropriate loader to handle this file type.

爲了從 JavaScript 模塊中import 一個 CSS 文件，你須要在module配置、安裝並添加style-loader、css-loader

安裝

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

css-loader 用來處理css文件,style-loader用來處理處理的文件放入head標籤中

修改配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ],
+   module:{
+       rules:[
+           {
+               test: /\.css$/,
+               use:['style-loader','css-loader']
+           }   
+       ]
+   }
}

每一次修改配置文件以後都須要從新啓動。從新啓動以後發現頁面中的字體變成了紅色。

module：這些選項決定了如何處理項目中的不一樣類型的模塊。
module.rules 數組,建立模塊時，匹配請求的規則數組。這些規則可以修改模塊的建立方式。這些規則可以對模塊(module)應用 loader，或者修改解析器(parser)。
test:是一個正則,匹配因此已.css結尾的文件。
use:規定使用何種loader處理匹配到的文件。

loader的執行順序默認是從右往左的,假如上面的例子中咱們將loader調換位置就會報錯，這是由於咱們是先處理css文件，再將文件插入到head標籤內,順序錯誤的話就會識別不出來。

上面的例子中loader咱們也能夠以這種方式,這樣咱們能夠在options對象中傳遞相應的配置參數

use: [{
    loader: 'style-loader',
    options: {}
}, 'css-loader']

如今修改index.html文件以下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
+   <style>
+       .hello{
+           color: pink;
+       }
    </style>
    <body>
        <div class="hello">
            hello,qzy
        </div>
    </body>
</html>

咱們在文件中添加了一個樣式，而後刷新的話能夠看到寫的樣式沒有生效。這是由於style-loader會將css文件默認放到head標籤的末尾。咱們修改style-loader配置項讓文件放到最上方

my.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
-           use:['style-loader','css-loader']
+           use: [{
+               loader: 'style-loader',
+               options: {
+                   insertAt: 'top'
+               }
+           }, 'css-loader']
    }]
    }
}

再次運行就能夠看到效果了。
最重要的是，現有的 loader 能夠支持任何你能夠想到的 CSS 處理器風格 - postcss, sass 和 less 等。咱們如今處理一下sass。sass有兩種語法：sass與scss,咱們這次是sccs語法。修改目錄

webpack-demo
    package.json
    my.config.js   
    index.html
    /src
        index.js
        style.css 
+       style.scss

style.scss

$color: #F90;
.hello {
  $width: 100px;
  width: $width;
  background-color: $color;
}

安裝loader

npm install sass-loader node-sass webpack --save-dev

修改配置文件,由於要處理scss文件，因此咱們要新增一條規則，並在使用loader是先將scss文件轉化爲css文件，其餘的就與css文件處理一致了

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: 'style-loader',
                options: {
                    insertAt: 'top'
                }
            }, 'css-loader']
        }, 
    +   {
    +       test: /\.scss$/,
    +       use: ['style-loader', 'css-loader', 'sass-loader']
    +   }
        ]
    }
}

從上面的例子中咱們不難發現咱們的樣式是被放到了頁面中的style標籤內，可是假如咱們想將這些樣式單獨抽離成一個文件，該怎麼作呢？

抽離css

安裝插件

npm install --save-dev mini-css-extract-plugin

修改配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    +   new MiniCssExtractPlugin({
    +       filename:'main.css'//抽離的文件名
    +   }),
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
-               loader:'style-loader',
+               loader: MiniCssExtractPlugin.loader,
            }, 'css-loader']
        }, {
            test: /\.scss$/,
    -       use: ['style-loader', 'css-loader', 'sass-loader']
    +       use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }]
    }
}

由於須要抽離單獨的css文件，因此對於的規則也需修改。再次運行就會發現樣式已經被抽離到了main.css文件中了。

css3前綴

開始以前請看以下代碼

//原始
display: flex;
transform: rotate(45deg);
//轉化後
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

爲了兼容不一樣的瀏覽器，咱們再使用css3屬性時，通常都須要加上瀏覽器特有的前綴，如今咱們使用工具來幫助咱們自動補全瀏覽器前綴。

修改style.scss以下

$color: #f90;
.hello {
    $width: 100px;
    width: $width;
    background-color: $color;
+   display: flex;
+   transform: rotate(45deg);
}

安裝

npm install --save-dev postcss-loader

修改配置文件中的scss處理的規則

{
    test: /\.scss$/,
-   use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
+   use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader']
}

由於要在css文件處理前加前綴，所在位置必定要放正確喲。此時運行會發現報了以下錯誤

Error: No PostCSS Config found

咱們須要一個配置文件postcss.config.js,該文件與my.config.js文件同級，內容以下

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

安裝autoprefixer

npm install --save-dev autoprefixer

autoprefixer，必裝插件之一。方便的寫規範的css，它會爲你提供很是完整的hack兼容方案的。固然這裏須要瞭解一下的是，它的大部分兼容數據來源Can I Use，另一個稍微須要瞭解的插件配置參數就是browsers，好比這樣寫：

module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: 'last 2 versions'
        })
    ]
}

強烈建議將查詢寫入package.json（這樣其餘插件也可以從中獲取到項目將要兼容的版本），而非配置postcss.config.js中autoprefixer的browsers參數。因此此處建議寫法以下：

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

package.json 新增

"browserslist": [
    "last 2 version",//每一個瀏覽器中最新的兩個版本
]

browserslist爲數組,還有其餘參數下面簡單介紹一下

> 5% or >= 5%: 全球瀏覽器使用率大於5%或大於等於5%
Firefox > 20: 火狐版本號大於20
ie 6-8: 選擇包含ie6-8的版本

再次運行就獲得了咱們想要的效果。下一節咱們處理圖片資源。

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