webpack4入門例項

毋庸置疑，webpack現在已經成為前端很多的打包器。網上關於webpack的相關文章也是很多的，關於webpack的具體配置，官網上也是講解的很清楚，本文主要是根據自己的學習，進行簡單的webpack例項的講解，供初學者進行入門實戰。文中的例項是基於webpack4的，所以請小夥伴們一定要注意自己本地的環境，不要因為環境問題而浪費不必要的時間。文章中如有錯誤的地方，歡迎大家指正。

我的例項是循序漸進的，我們先從最簡單的開始
新建一個demo資料夾，然後再將命令列切換到當前目錄下，執行如下命令

npm  init  -y
npm  install webpack --save-dev

之後我們就可以看到demo檔案加下生成了一個package.json的檔案，這個檔案很重要，概括的說就是該檔案包含了當前工程所需要的所有依賴關係，具體的作用大家可以百度一下。

之後我們在demo下新建資料夾src，在demo下新建檔案webpack.config.js和index.html
在src資料夾下新建main.js

main.js

document.write("hello  world");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset 
="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <script src="dist/bundle.js"></script>
</body 
>
</html>

webpack.config.js

const  path = require('path');

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

執行如下指令

webpack --mode  development

命令執行成功後，你會發現demo檔案下下多了一個dist資料夾，在dist資料夾中，多了一個bundle.js檔案
此時在瀏覽器中開啟index.html檔案，你將看到如下內容

avatar

如此，我們便完成了一個最簡單的webpack例項，下面我們將在這個基礎上，一步一步的進行擴充套件！！

1.根據模板生成index.html
這就需要使用webpack的外掛html-webpck-plugin

npm  install  --save-dev  html-wbpack-plugin

webpack.config.js

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

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}

修改index.html，去掉bundle.js的引用
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>
<body>    
</body>
</html>

執行指令

webpack  --mode  development

之後我們就會看到在dist目錄下生成了以demo/index.html為模板的index.html

至於具體的html-webpack-plugin外掛引數的解釋，可以檢視這篇文章

2. 載入CSS檔案
載入css檔案，需要使用相應的載入器，也就是需要配置相應的loader.
我們先來準備相應的檔案，我們在src下新建一個css資料夾，並新建檔案style.css
我們將index.html中的樣式移入到style.css檔案中，並做一點小修改
style.css

body {
    background-color: yellow;
    color:red;
}

然後再main.js檔案中，我們引入相應的樣式
main.js

import  style from './css/style.css'
document.write("hello  world");

載入css檔案需要使用css-loader,以及style-loader，需要使用npm進行安裝

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

進行webpack.config.js檔案的配置

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

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}

最後我們執行webpack --mode development

此時我們在瀏覽器中檢視dist檔案加下的index.html，結果如下

avatar

此時如果你仔細檢視dist資料夾，你會發現並沒有css檔案，而在index.html中，其內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>    
<script type="text/javascript" src="bundle.js"></script></body>
</html>

那麼問題來了，樣式去哪了？其實樣式已經被打包進了bundle.js指令碼中，你可以在該檔案中搜索一下 ‘background-color’ ，一定會有所發現。

3. 載入圖片
下面我們更改一下樣式，在樣式中引入圖片
我們先在src目錄下新建img資料夾，同時在該資料夾中放入一張圖片test.jpg，然後我們來更改樣式
style.css

body {
    background-color: yellow;
    color:red;
    background-image: url('../img/test.jpg');
}

如果此時我們直接去進行打包，是會報錯的。我們需要相應的載入器去載入圖片，這裡我們使用的是url-loader，同時我們還需要file-loader來載入檔案。

npm  install --save-dev  url-loader   file-loader

webpack.config.js

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

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'./images/',
                        limit:500
                    }
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}

執行指令webpack --mode development，然後我們會發現在dist資料夾下多了一個images資料夾，瀏覽index.html，內容如下

毋庸置疑，webpack現在已經成為前端很多的打包器。網上關於webpack的相關文章也是很多的，關於webpack的具體配置，官網上也是講解的很清楚，本文主要是根據自己的學習，進行簡單的webpack例項的講解，供初學者進行入門實戰。文中的例項是基於we

Spring Boot入門例項

簡介 Spring Boot是由Pivotal團隊提供的全新框架，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置。通過這種方式，Boot致力於在蓬勃發展的快速應用開發領域（rapid application

JqueryUI入門例項

Jquery ui是一套不錯的前端UI框架。官網地址：https://jqueryui.com/ 下載jquery ui，下載地址https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip 下載下來的是一個壓縮包，解壓後

jquery-jquery入門|例項目錄

什麼是jquery jQuery是一個JavaScript函式庫。 jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。 jQuery庫包含以下功能： HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函式 JavaScript 特效和

JSF2 入門例項

JSF介紹 JavaServer Faces (JSF) 是一種用於構建Java Web 應用程式的標準框架（是Java Community Process 規定的JSR-127標準）。它提供了一種以元件為中心的使用者介面（UI）構建方法，從而簡化了Java伺服器端應用程式的開發。由

這可能是最好玩的python GUI入門例項!

簡單的說,GUI程式設計就是給程式加上圖形化介面. python的指令碼開發簡單,有時候只需幾行程式碼就能實現豐富的功能,而且python本身是跨平臺的,所以深受程式設計師的喜愛. 如果給程式加一個圖形化介面,那麼普通的使用者也就能用上python的指令碼,極大提升工作效率,所以給python程式加

Maven入門實戰（一）——MVN的安裝、配置、生命週期、簡單入門例項和建立父/子工程

1 Maven簡介 Maven是Apache旗下的一個開源專案，是純Java開發的一個專案管理工具，並且只是用來管理Java專案的。 1.1 Maven的好處 1）Maven專案佔用容量小同樣的一個專案，如果是用Maven構建的話，專案的大小要小得多。（這是由於Ma

springmvc入門例項

程式碼執行流程：瀏覽器中訪問路徑為http://localhost:8080/itemList/itemList.action .action被web.xml中配置的*.action攔截 *.action這個url-pattern對應servlet-name為springm

顯微鏡下的webpack4入門

前端的構建打包工具很多，比如grunt，gulp。相信這兩者大家應該是耳熟能詳的，上手相對簡單，而且所需手敲的程式碼都是比較簡單的。然後webpack的出現，讓這兩者打包工具都有點失寵了。webpack比起前兩者打包工具，對於前端程式設計師JS程式設計能力的要求還是挺高的。不過需要相容ie8及以下的

Python字串格式化快速入門例項(自3.7官方文件)

Python字串格式化例子 Shawn python3.7 文件： https://docs.python.org/3/library/string.html#formatstrings 完整功能介紹見官方文件. 本文可用於快速查詢Python字串格

Scrapy入門例項(使用Scrapy抓取豆瓣電影top250榜單）

專案地址：https://github.com/yuanfuzhi/ScrapyDemo.git 一 Scrapy介紹與安裝 1， Scrapy介紹 Scrapy是一個為了爬取網站資料，提取結構性資料而編寫的應用框架。可以應用在包括資料探勘，資訊處理或儲存歷史資料等一系列的程式中

Caffe入門例項與詳解人工智慧框架

Caffe的幾個重要檔案用了這麼久Caffe都沒好好寫過一篇新手入門的部落格，最近應實驗室小師妹要求，打算寫一篇簡單、快熟入門的科普文。利用Caffe進行深度神經網路訓練第一步需要搞懂幾個重要檔案： solver.prototxt train_val.proto

hibernate入門例項

###Hibernate5簡單應用例項 1.下載Hibernate所需jar包 2.新建java專案，並匯入jar包 3.新建User.java檔案，User類的屬性於資料庫表的欄位一一對應 -- ---------------------------- -- Table str

docker入門例項

1.image檔案 Docker 把應用程式及其依賴，打包在 image 檔案裡面。只有通過這個檔案，才能生成 Docker 容器。image 檔案可以看作是容器的模板。Docker 根據 image 檔案生成容器的例項。同一個 image 檔案，可以生成多個同時執行的容器例項。 image

WebService入門例項教程（兩個網址）

https://www.cnblogs.com/AlanLee/archive/2017/06/02/6933073.html http://www.iteye.com/topic/1135747 前言：朋友們開始以下教程前，請先看第五大

EJB 開發環境與入門例項

文章目錄 1.環境準備 2.WildFly 介紹下載配置與啟動 3. EJB 服務建立 4.客戶端呼叫

scrapy爬蟲框架簡單入門例項（二）

接著上一篇文章，我們已經可以用爬蟲訪問目標網站爬取頁面了，現在需要自動提交表單查詢資料，並且從頁面中篩選出每期中獎號碼儲存為json檔案匯出。首先建立一個scrapy.Item類（開啟專案資料夾下的items.py檔案）： import scrapy class SsqSpiderIte

scrapy爬蟲框架簡單入門例項（一）

scrapy是一個用於爬取網站資料，提取結構性資料的python應用框架。爬取的資料一般用於資料分析，資料處理，儲存歷史資料等。scrapy的整體架構大致如下：主要包括了以下元件：引擎(Scrapy) 用來處理整個系統的資料流, 觸發事務(框架核心) 排程器(

caffe2 教程入門例項影象處理線性迴歸

學習思路 1、先看官方文件，學習如何使用python呼叫caffe2包，包括 Basics of Caffe2 - Workspaces, Operators, and Nets Toy Regression Image Pre-Processing Loadin

mybatis 詳解（三）------入門例項（基於註解）

目錄 1、建立MySQL資料庫：mybatisDemo和表：user 2、建立一個Java工程，並匯入相應的jar包，具體目錄如下 3、在 MyBatisTest 工程中新增資料庫配置檔案 mybatis-configuration.xml 4、定義表所對應的實體

webpack4入門例項

相關推薦