webpack4初學習

Object 發布于2019-08-23 14:51 / 3360人閱讀

webpack基于node，因此想要學習webpack首先要安裝node。
webpack4要安裝node8.2以上版本。

1、安裝webpack

為什么選擇本地安裝，主要是由于以后介紹熱更新這一部分不會報錯，如果全局安裝熱更新就會報錯，以本部分為基礎依次介紹，保證各部分不會出錯。

mkdir webpack-test
cd webpack-test
npm init //初始化npm，都選擇默認，文件夾自動創建package.json
npm i webpack webpack-cli -D  // 本地安裝webpack

★ npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊并保存到 package.json 的 devDependencies中，主要在開發環境中的依賴包

2、初試0配置打包

webpack4可以支持0配置打包，這里所說的0配置又是什么呢？當然在開發者眼中0配置的東西，那根本是無法用的，因為不夠智能，那么我們就來看看做到了哪些0配置。
在使用webpack進行打包的時候，默認情況下會將src下的入口文件(index.js)進行打包。

a. 根目錄下創建文件夾src,并創建index.js文件

document.write("Hello webpack!")

b. 打包測試

如果直接打包：

最后提示：
WARNING in configuration //配置警告
大體意思：是mode沒有設置，webpack生產環境無法獲取mode值，請設置mode來確定開發環境還是生產環境

通過以下手段皆可以不報錯：

// node v8.2版本以后都會有一個npx
// npx會執行bin里的文件

npx webpack     // 不設置mode的情況下 打包出來的文件自動壓縮
npx webpack --mode development  // 設置mode為開發模式，打包后的文件不被壓縮

當執行npx webpack命令的時候，webpack會自動查找項目中src目錄下的index.js文件，然后進行打包，生成一個dist目錄并存在一個打包好的main.js文件
這些算是0配置的操作了，名字都是定義好的，不能變，想想也很雞肋

目錄結構：

3、配置執行文件

重新創建目錄：lesson_test

初始化：npm init //全部選擇默認即可

創建webpack.config.js配置文件

webpack.config.js基本配置項：

module.exports = {
    entry: "",               // 入口文件
    output: {},              // 出口文件
    module: {},              // 處理對應模塊
    plugins: [],             // 對應的插件
    devServer: {},           // 開發服務器配置
    mode: "development"      // 模式配置
}

a.根目錄下創建src文件夾，并在src目錄下創建index.js:

document.write("Hello webpack!")

b.配置文件webpack.config.js：

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist")
    },
    mode: "development"
}

c.執行webpack

通過簡單打包，在根目錄下多出一個文件夾

查看一下dist文件夾下bundle.js可見以下代碼，證明打包成功

友情提示：

在我們每次npm run build的時候都會在dist目錄下創建很多打好的包，如果積累過多可能也會混亂,所以應該在每次打包之前將dist目錄下的文件都清空，然后再把打好包的文件放進去
這里提供一個clean-webpack-plugin插件

npm i clean-webpack-plugin -D

webpack.config.js中添加以下配置代碼：

let CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    plugins: [
        // 打包前先清空
        new CleanWebpackPlugin("dist")  
    ]
}

4、配置開發環境/生產環境

上邊部分我們測試已經發現，直接打包會警告配置環境，本部分著重介紹一下。

環境配置在package.json文件：

{
  "name": "lesson_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack --mode development", // 開發環境，和上部分npx webpack --mode development對比我們可以發現點端倪
    "build": "webpack --mode production" // 生產環境
  },
  "author": "",
  "license": "ISC"
}

開發環境和生產環境打包會有什么區別呢？
"dev": "webpack --mode development", // 開發環境，打包后文件是未壓縮的文件
"build": "webpack --mode production" // 生產環境，打包后文件是壓縮過的文件

配置完成后，通過執行命令：

a. 執行 npm run dev

打包后文件為非壓縮文件

b. 執行 npm run build

打包后文件為壓縮文件

5、多文件入口配置

假如src目錄下多個文件入口，又該如何配置webpack.config.js文件呢。

具體方案：

一種是沒有關系的但是要打包到一起去的，可以寫一個數組，實現多個文件打包

另一種就是每一個文件都多帶帶打包成一個文件的

下面就來看看這兩種方式的寫法，配置代碼：

const path = require("path")

module.exports = {
    // 1.寫成數組的方式就可以打出多入口文件，不過這里打包后的文件都合成了一個
    // entry: ["./src/index.js", "./src/login.js"],
    // 2.真正實現多入口和多出口需要寫成對象的方式
    entry: {
        index: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        // 1. filename: "bundle.js",
        // 2. [name]就可以將出口文件名和入口文件名一一對應
        //filename: "[name].js", // 打包后會生成index.js和login.js文件
        filename: "[name].[hash:16].js", //生成文件名含有16位哈希值
        path: path.resolve(__dirname, "dist")
    },
    mode: "development"
}

執行npm run dev結果

目錄結構（生成文件的名字帶有16位哈希值）：

6、打包html配置

webpack的核心功能是打包js的，html、style、css、less、sass、img等等需要引入各種loader，到達這一部分，每一步都需要引入對應的插件。

html需要安裝html-webpack-plugin插件，開始引入：

npm i html-webpack-plugin -D  // 本地安裝

因為是個插件，所以需要在webpack.config.js里引用一下。

a. 單文件入口配置

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 引入html打包插件

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            hash: true // 在html模板中自動添加？20位哈希值
        })
    ],
    mode: "development"
}

執行npm run dev 生成目錄

打開index.html文件，可見js文件后添加了“？20位哈希值”

b. 多文件入口配置

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],  // 對應關系,main.js對應的是index.html,這里特意修改為main，方便理解，以下會和目錄文件作對比就一目了然了
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],  // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        })
    ],
    mode: "development"
}

由目錄可見，dist文件夾下生成index.html對應main.js、login.html對應login.js

上面基本介紹完了html和js的打包配置了，現在我們還缺一個好兄弟css，webpack對css的解析需要用到loader，所以我們先提前安裝好，待會好方便使用

7、引入css文件

這里涉及到兩種樣式：

html頁面內style樣式 ,本部分介紹

html引入外部樣式表第8部分介紹

npm i style-loader css-loader -D  // stylecss

// 引入less文件的話，也需要安裝對應的loader
npm i less less-loader -D

文件目錄結構

a. 配置樣式

b. 在js文件中引入樣式

c. 配置webpack.config.js文件

說明：配置module添加規則，本部分添加可css、less的匹配打包規則

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],  // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],  // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        })
    ],
    mode: "development"
}

d. 執行npm run dev打包

生成靜態文件index.html

生成靜態文件login.html

此時打包后的css文件是以行內樣式style的標簽寫進打包后的html頁面中，如果樣式很多的話，我們更希望直接用link的方式引入進去，這時候需要把css拆分出來

extract-text-webpack-plugin插件相信用過的人都知道它是干什么的，它的功效就在于會將打包到js里的css文件進行一個拆分

8、拆分css文件

本部分也就是將css文件拆分出來，html頁面以的方式引入。

// @next表示可以支持webpack4版本的插件
npm i extract-text-webpack-plugin@next -D

配置webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin") // 引入插件

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 將css用link的方式引入就不再需要style-loader了
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],
            hash: true
        }),
        new ExtractTextWebpackPlugin("css/style.css") // 拆分后會把css文件放到dist目錄下的css/style.css
    ],
    mode: "development"
}

配置中只對index.html文件引入樣式，而login.html沒有引入，因此要注釋掉login.js引入的樣式

// import "./less/style.less" // 注釋掉這句代碼

document.write("Welcome to webpack!
")

執行npm run dev,生成dist目錄

首頁靜態頁面代碼，可見以link的方式引入了css樣式

9、拆分多個css文件

配置webpack.config.js文件

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: "css-loader"
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"], // 一定要注意這里
                    fallback: "style-loader" // 缺少這里也是無法編譯less
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],  // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],  // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

index.js文件

import "./css/style.css"
import "./less/style.less" // 引入style.less

document.write("Hello webpack!
測試less樣式是否引入
")

執行 npm run dev ,獲取靜態頁面截圖，可見全部正常引入

執行效果

生成文件目錄：

10、樣式表引用圖片

處理圖片方面，也需要loader

npm i file-loader url-loader -D

這里著重介紹一下file-loader和url-loader：

本部分介紹url-loader（增強的file-loader）；

url-loader作用：根據需求選擇性的把某些小圖片編碼成base64格式寫進頁面；從而減少服務器請求。優化性能。

url-loader解決的問題:
如果圖片較多，會發很多http請求，會降低頁面性能。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小于limit字節的文件會被轉為DataURl，大于limit的還會使用file-loader進行copy。

url-loader和file-loader是什么關系呢？
簡答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader。

通過上面的介紹，我們可以看到，url-loader工作分兩種情況：
1.文件大小小于limit參數，url-loader將會把文件轉為DataURL；
2.文件大小大于limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。

如果是在css文件里引入的如背景圖之類的圖片，就需要指定一下相對路徑
webpack.config.js配置：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: "css-loader",
                    publicPath: "../" // 樣式根據相對路徑引用到圖片資源
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192, // 小于8k的圖片自動轉成base64格式，并且不會存在實體圖片
                            outputPath: "images" // 圖片輸出路徑
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

樣式style.css代碼：

/* style.css */
@charset "utf-8";

.logo {
    display: block;
    width: 222px;
    height: 222px;
    background: url(../images/logo.png) no-repeat; // 這里的logo.png大小大于8K,以下生成在dist文件夾下images目錄
}
.color-red {
    color: #f00;
}

在css中指定了publicPath路徑這樣就可以根據相對路徑引用到圖片資源了，如下圖所示

執行npm run dev 生成目錄結構：

11、js文件引入圖片

url-loader能自動識別CSS代碼中的圖片路徑并將其打包至指定目錄，但是JS就不同了，我們來看下面的例子。

// index.js
var img = new Image();
img.src = "./images/logo.png";
document.body.appendChild(img);

如果不使用Webpack打包，正常情況下只要路徑正確圖片是能夠正常顯示的。然而，當使用Webpack打包后，我們會發現圖片并未被成功打包到dist目錄，自然圖片也無法顯示出來。
這其實是因為Webpack并不知道"../images/logo.png"是一張圖片，如果要正常打包的話需要先將圖片資源加載進來，然后再將其作為圖片路徑添加至圖片對象。具體代碼如下：

// index.js
import imgUrl from "./images/logo.png" // 引入圖片（路徑），如果小于8K格式為base64，大于8K為設置路徑dist目錄下"./images/logo.png"

const img = new Image() // 實例一個圖片對象
img.src = imgUrl;
document.body.appendChild(img); // 添加到dom節點中

完整index.js文件：

import "./css/style.css"
import "./less/style.less"
import imgUrl from "./images/logo.png" // 引入圖片

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // "./images/logo.png"

document.write("
Hello webpack!
測試第二個css樣式是否引入
")

完整webpack.config.js配置文件（相比第10部分無任何變化）：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: "css-loader",
                    publicPath: "../" // 樣式根據相對路徑引用到圖片資源
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images", // 圖片輸出路徑
                            name: "[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

執行npm run dev生成文件目錄

生成靜態文件

可見圖片在js中正常加載到頁面中，由于logo.png大于8K，被打包到dist文件目錄的images文件中。如果圖片小于8K，則以base64編碼格式寫入頁面進項渲染。

12、html頁面引入圖片

頁面中經常會用到img標簽，img引用的圖片地址也需要一個loader來進行處理

npm i html-withimg-loader -D

完整wabpack.config.js配置：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: "css-loader",
                    publicPath: "../" // 樣式根據相對路徑引用到圖片資源
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images", // 圖片輸出路徑
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /.(htm|html)$/,
                use: "html-withimg-loader" // 引入html-withimg-loader
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

打包后生成對應目錄：

13、引入字體圖片和SVG圖片

字體圖標和svg圖片都可以通過file-loader來解析，在第11部分已經進行安裝。
webpack.config.js引入loader

module.exports = {
    module: {
        rules: [
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "iconfont" // 打包到指定文件夾
                        }
                    }
                ]
            }
        ]
    }
}

這樣即使樣式中引入了這類格式的圖標或者圖片都沒有問題了，img如果也引用svg格式的話，配合上面寫好的html-withimg-loader就都沒有問題了。

在index.js引入樣式：

import "./css/style.css"
import "./less/style.less"
import "./iconfont/iconfont.css" // 引入字體圖片
import imgUrl from "./images/pic.jpg" // 引入圖片鏈接

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // "./images/logo.png"

document.write("
Hello webpack!
測試第二個css樣式是否引入

")

完整的webpack.config.js配置：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: "css-loader",
                    publicPath: "../" // 樣式根據相對路徑引用到圖片資源
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images", // 圖片輸出路徑
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "iconfont" // 打包到指定文件夾
                        }
                    }
                ]
            },
            {
                test: /.(htm|html)$/,
                use: "html-withimg-loader" // 引入html-withimg-loader,將圖片轉化為base64圖片
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

打包后目錄文件：

對應靜態文件

14、添加CSS3前綴

通過postcss中的autoprefixer可以實現將CSS3中的一些需要兼容寫法的屬性添加響應的前綴，這樣省去我們不少的時間

npm i postcss-loader autoprefixer -D // 安裝postcss-loader 和 autoprefixer

安裝后，我們還需要像webpack一樣寫一個config的配置文件，在項目根目錄下創建一個postcss.config.js文件，配置如下：

const Autoprefixer = require("autoprefixer")

module.exports = {
    plugins : [
        Autoprefixer
    ]
}

然后在webpack里配置postcss-loader,webapack.config.js完整代碼：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: ["css-loader", "postcss-loader"], // 配置postcss-loader
                    fallback: "style-loader",
                    publicPath: "../"
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images",
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "iconfont"
                        }
                    }
                ]
            },
            {
                test: /.(htm|html)$/,
                use: "html-withimg-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: "development"
}

index.js添加測試元素

樣式表style.css，簡單書寫了animation動畫效果，沒有添加兼容瀏覽器的前綴

/* style.css */
@charset "utf-8";

.logo {
    display: block;
    width: 222px;
    height: 222px;
    background: url(../images/logo.png) no-repeat;
}
.color-red {
    color: #f00;
}
.test-css3 {
    position: absolute;
    left: 500px;
    top: 0;
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: myfirst 5s linear 2s infinite alternate running;
}
@keyframes myfirst {
    0% {
        background: #f00;
        left: 500px;
        top: 0;
    }
    25% {
        background: #ff0;
        left: 900px;
        top: 0;
    }
    50% {
        background: #f0f;
        left: 900px;
        top: 400px;
    }
    75% {
        background: #000;
        left: 500px;
        top: 400px;
    }
    100% {
        background: #0f0;
        left: 500px;
        top: 0;
    }
}

執行npm run dev 后生成的style.css代碼自動添加了-webkit-前綴

15、轉義ES6

在實際開發中，我們在大量的使用著ES6及之后的api去寫代碼，這樣會提高我們寫代碼的速度，不過由于低版本瀏覽器的存在，不得不需要轉換成兼容的代碼，于是就有了常用的Babel。
bable可以將ES6代碼轉義ES5代碼，安裝如下：

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 -D

babel兼容ES6和草案api，通過一個.babelrc文件來配置一下，對這些版本的支持

// .babelrc
{
    "presets": ["env", "stage-0"]   // 從右向左解析
}

我們再在webpack里配置一下babel-loader既可以做到代碼轉成ES5了

module.exports = {
    module: {
        rules: [
            {
                test:/.js$/,
                use: "babel-loader",
                include: /src/,          // 只轉化src目錄下的js
                exclude: /node_modules/  // 排除掉node_modules，優化打包速度
            }
        ]
    }
}

添加本部分配置，完整wabpack.config.js代碼：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: ["css-loader", "postcss-loader"],
                    fallback: "style-loader",
                    publicPath: "../" // 樣式根據相對路徑引用到圖片資源
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.js$/,
                use: "babel-loader",
                include: "/src/",
                exclude: "/node_modules/"
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images", // 圖片輸出路徑
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "iconfont" // 打包到指定文件夾
                        }
                    }
                ]
            },
            {
                test: /.(htm|html)$/,
                use: "html-withimg-loader" // 引入html-withimg-loader,將圖片轉化為base64圖片
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            chunks: ["main"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            chunks: ["login"], // 對應關系,index.js對應的是index.html
            hash: true // 在html模板中自動添加？20位哈希值
        }),
        styleCss,
        styleLess,
        new CleanWebpackPlugin("dist")
    ],
    mode: "development"
}

16、啟動靜態服務器和熱更新

A.啟動靜態服務

啟動一個靜態服務器，默認會自動刷新，就是說你對html,css,js文件做了修改并保存后，瀏覽器會默認刷新一次展現修改后的效果

module.exports = {
    devServer: {
        contentBase: "./dist",
        host: "localhost",      // 默認是localhost
        port: 8080,             // 端口
        open: true,             // 自動打開瀏覽器
        // hot: true               // 開啟熱更新
    }
}

此時我們要對pakage.json文件進行修改：

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode production", 
    "dev": "webpack-dev-server --mode development --open" // 使用webpack-dev-server
  }

執行npm run dev 會自動打開默認瀏覽器，打開http://localhost:8080頁面，html,css,js修改保存后頁面會自動實時更新。
之前各部分我們每次執行npm run dev都會在根目錄生成靜態文件目錄dist,啟動靜態服務器，生成dist會儲存到內存當中，根目錄下不再生成dist文件夾。

B.熱更新
在配置devServer的時候，如果hot為true，就代表開啟了熱更新

module.exports = {
    devServer: {
        contentBase: "./dist",
        host: "localhost",      // 默認是localhost
        port: 8080,             // 端口
        open: true,             // 自動打開瀏覽器
        hot: true               // 開啟熱更新
    }
}

但是熱更新是指定某個js文件的更新，只需在指定的js文件添加以下代碼，表示本文件實現熱更新，修改文件后手動刷新頁面，會看到修改后的內容；如果不添加以下代碼，js文件還是自動刷新

if (module.hot) {
    // 實現熱更新
    module.hot.accept();
}

熱更新和自動刷新的區別:

js文件被檢測到module.hot,就實現熱更新，檢測不到就是自動刷新；

熱更新需要手動刷新獲取修改后效果，自動刷新是修改保存，頁面自動更新。

完整webpack.config.js代碼：

const path = require("path")
const webpack = require("webpack")  // 引入webpack
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")

// 樣式處理
const styleCss = new ExtractTextWebpackPlugin("./css/style.css")
const styleLess = new ExtractTextWebpackPlugin("./css/style2.css")

module.exports = {
    entry: {
        main: "./src/index.js",
        login: "./src/login.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: styleCss.extract({
                    use: ["css-loader", "postcss-loader"],
                    fallback: "style-loader",
                    publicPath: "../"
                })
            },
            {
                test: /.less$/,
                use: styleLess.extract({
                    use: ["css-loader", "less-loader"],
                    fallback: "style-loader"
                })
            },
            {
                test: /.js$/,
                use: "babel-loader",
                include: "/src/",
                exclude: "/node_modules/"
            },
            {
                test: /.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images",
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "iconfont"
                        }
                    }
                ]
            },
            {
                test: /.(htm|html)$/,
                use: "html-withimg-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            title: "首頁測試",
            chunks: ["main"],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",
            title: "登錄頁測試",
            chunks: ["login"],
            hash: true
        }),
        styleCss,
        styleLess,
        new CleanWebpackPlugin("dist"),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        host: "localhost",
        port: 8080,
        open: true,
        hot: true // 實現頁面熱更新
    },
    resolve: {
        extensions: [".js", ".json", ".css"]
    },
    mode: "development"
}

index.js文件代碼：

import "./css/style.css"
import "./less/style.less"
import "./iconfont/iconfont.css"
import imgUrl from "./images/pic.jpg" // 引入圖片

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // "./images/logo.png"

document.write("
Hello webpack!
測試第二個css樣式是否引入

")

if (module.hot) {
    module.hot.accept()
}

17、resolve解析

在webpack的配置中，resolve我們常用來配置別名和省略后綴名

module.exports = {
    resolve: {
        // 別名
        alias: {
            $: "./src/jquery.js"
        },
        // 省略后綴
        extensions: [".js", ".json", ".css"]
    },
}

未完待續

參考鏈接：
1、https://juejin.im/post/5adea0...
2、https://www.cnblogs.com/cisum...
3、https://www.cnblogs.com/golov...
4、https://www.webpackjs.com/loa...
5、https://www.cnblogs.com/golov...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101245.html

webpack4.0初體驗、各版本及parcel性能對比

摘要：前段時間又發布了新版本我接觸的時候已經版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會介紹藍色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關于配置方面，應前段時間webpack又發布了新版本webpack4我接觸的時候已經4.1版本了node支持的版本必須node: >=6.11.5 webpack...

MarvinZhang 2019-08-22 15:11 評論0 收藏0
一個現代化的webpack工程初建

摘要：一前言文章介紹了一個現代化的項目的環境是什么樣的。其中一個就是引用路徑的問題。擴展將單獨打包詳細介紹見這是一個插件，可以簡化創建文件以便為包提供服務。兩種環境的配置在中都支持的配置具體的默認配置查詢可以移步這里的默認設置。一前言文章介紹了一個現代化的項目的webpack4環境是什么樣的。這里只是介紹了基礎的功能，如果需要詳細的相關只是可以去webpack官網去查閱。代碼地址：gi...

MyFaith 2019-08-22 18:07 評論0 收藏0
vue-cli3.0初體驗～

摘要：比如傳遞給時，使用。為所有的及其預處理文件開啟。在生產環境下為和使用在多核機器下會默認開啟。是否使用分割供應的包也可以是一個在包中引入的依賴的顯性的數組。查閱配置行為。之前因為parcel的出現，webpack也跟進了零配置vue-cli自然也不能落下,cli3.0也升級到webpack4，并增加許多新特性安裝并創建一個項目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 評論0 收藏0
webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

摘要：適用于主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據，而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這里分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也集成在里面，整體初現雛形，還有很多需要優化和改善的地方。。。項目結構 │ ├─build ...

whatsns 2019-08-23 11:44 評論0 收藏0
前端方便面

摘要：技術前端布局推進劑間距規范化利用變量實現令人震驚的懸浮效果很棒，但有些情況不適用布局說可能是最全的圖片版學習網格布局使用的九大誤區圖解布局布局揭秘和中新增功能探索版本迭代論基礎談展望對比探究繪圖中撤銷功能的實現方式即將更改的生命周期幾道高技術 CSS 前端布局推進劑 - 間距規范化利用CSS變量實現令人震驚的懸浮效果 Flexbox 很棒，但有些情況不適用 CSS布局說——可能是最...

liaoyg8023 2019-08-22 17:01 評論0 收藏0

發表評論

登陸后可評論

0條評論

Object

男|高級講師

我要關注我要私信

TA的文章

[C/C++ C++11]正則表達式

閱讀 1701·2021-11-25 09:43
window.open 打開新窗口被攔截的解決方案

閱讀 2665·2019-08-30 15:53
canvas下的全屏問題

閱讀 1807·2019-08-30 15:52
div寬度和高度固定，讓圖片鋪滿整個div而且不變形

閱讀 2897·2019-08-29 13:56
JavaScript面向對象編程——Function類型

閱讀 3316·2019-08-26 12:12
Node.js 全局對象

閱讀 565·2019-08-23 17:58
vue-element-admin簡化版

閱讀 2126·2019-08-23 16:59
每日 30 秒 ? 數組也會禿頂

閱讀 931·2019-08-23 16:21

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

webpack4初學習

Welcome to webpack!

Hello webpack!

測試less樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

相關文章

webpack4.0初體驗、各版本及parcel性能對比

一個現代化的webpack工程初建

vue-cli3.0初體驗～

webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

前端方便面

發表評論

0條評論

Object

男|高級講師

TA的文章

[C/C++ C++11]正則表達式

window.open 打開新窗口被攔截的解決方案

canvas下的全屏問題

div寬度和高度固定，讓圖片鋪滿整個div而且不變形

JavaScript面向對象編程——Function類型

Node.js 全局對象

vue-element-admin簡化版

每日 30 秒 ? 數組也會禿頂

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

webpack4初學習

Welcome to webpack!

Hello webpack!

測試less樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

Hello webpack!

測試第二個css樣式是否引入

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！