使用webpack打包js檔案和css檔案簡單示例

阿新 • • 發佈：2021-02-04

在工作區建立一個資料夾 webpackdemo (vscode建立工作區) 初始化資料夾
右鍵資料夾在終端開啟輸入

npm init -y

建立src 在src中建立01.js 02.js main.js style.css
01.js

exports.info = function(str){
    document.write(str)//輸出到瀏覽器 不能用node來執行
}

02.js

exports.add = function(a,b){
    return a+b
}

style.css

body{
    background-color: 
 red;
}

main.js

const m = require("./01")
const y  = require("./02")
require("./style.css")

m.info("hello webpack"+y.add(11,9))

安裝webpack工具

npm install -g webpack webpack-cli

檢視安裝是否成功

webpack -v

安裝style-loader和 css-loader
Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。

Loader 可以理解為是模組和資源的轉換器。
首先我們需要安裝相關Loader外掛，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

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

webpack目錄下建立配置檔案webpack.config.js
以下配置的意思是：讀取當前專案目錄下src資料夾中的main.js（入口檔案）內容，分析資源依賴，把相關的js檔案打包，打包後的檔案放入當前目錄的dist資料夾下，打包後的js檔名為bundle.js

const path = 
 require("path"); //Node.js內建模組
module.exports = {
    entry: './src/main.js', //配置入口檔案
    output: {
        path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前檔案所在路徑
        filename: 'bundle.js' //輸出檔案
    },
    module: {
                rules: [  
                    {  
                        test: /\.css$/,    //打包規則應用到以css結尾的檔案上
                        use: ['style-loader', 'css-loader']
                    }  
                ]  
            }
}

在wepackdemo下建立dist資料夾用於存放打包後的檔案
右鍵資料夾終端執行

webpack --mode=development

即可在dist資料夾生成打包後的 bundle.js

測試：建立一個test.html

<body>
    <script src="./dist/bundle.js"></script>
</body>

在這裡插入圖片描述
也可以配置專案的npm執行命令，修改package.json檔案

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

執行npm命令執行打包

npm run dev

使用webpack打包js檔案和css檔案簡單示例

技術標籤：微服務線上教育平臺在工作區建立一個資料夾 webpackdemo (vscode建立工作區) 初始化資料夾右鍵資料夾在終端開啟輸入

Maven打包jar生成javadoc檔案和source檔案程式碼例項

這篇文章主要介紹了Maven打包jar生成javadoc檔案和source檔案程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

webpack-development配置-處理字型檔案和樣式檔案

技術標籤：webpack-配置webpackjavascript 地址碼雲config/webpack.base.jsconst path = require(\'path\');

Java打包後讀檔案和寫檔案操作方法

技術標籤：筆記Java基礎java程式語言 javaIO操作在打包後經常會報出檔案找不到的錯誤：

c#-檔案和流-寫-簡單實驗

技術標籤：c#-檔案和流 1.概要 string[] movies = { "WriteAllLines_1", "WriteAllLines_2" };File.WriteAllLines(f2, movies);

華為鴻蒙 HarmonyOS API 都更新了什麼內容：重點 SDK 變更，還有 Java API、JS API 和配置檔案等

6 月 29 日訊息一直以來 HarmonyOS 的 API 不斷擴充完善，可用功能更多，更加強大。但每次版本更新，開發者都要自己摸索新版本到底增加了哪些 API，耗費時間其實不少。

webpack 自學筆記 ---4 提取css檔案&css相容&壓縮css

乾坤符籙：　　提取css檔案為單獨檔案（mini-css-extract-plugin）　　css相容（postcss）

webpack學習---生產模式--壓縮css檔案

壓縮css 需要npm下載 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require(\'path\');

vue: p24 專案打包相關配置：webpack.config.js 配置和 package.json

1.打包配置package.json \"scripts\": { \"dev\": \"webpack serve\", //冒號前可隨意命名，冒號後必須固定

springboot實現單檔案和多檔案上傳

本文例項為大家分享了springboot實現單檔案/多檔案上傳的具體程式碼，供大家參考，具體內容如下

ASP.NET Core單檔案和多檔案上傳並儲存到服務端的方法

前言：　　在我們日常開發中，關於圖片，視訊，音訊，文件等相關檔案上傳並儲存到服務端中是非常常見的一個功能，今天主要是把自己在開發中常用的兩種方式記錄下來方便一下直接使用，並且希望能夠幫助到有需要的同

Java批量寫入檔案和下載圖片的示例程式碼

很久沒有在WhitMe上寫日記了，因為覺著在App上寫私密日記的話肯定是不安全的，但是想把日記存下來。，然後看到有匯出日記的功能，就把日記匯出了（還好可以直接匯出，不然就麻煩點）。匯出的是一個html檔案。可以直接

webpack原理-實現webpack打包js

// 這裡匯入webpack配置，我用物件的形式表示，當然entry屬性上定義的檔案要有

idea版本控制忽略.idea檔案和.iml檔案的問題

idea啟用碼推薦 IntelliJ IDEA 2020最新啟用碼(親測有效，可啟用至 2089 年) 最新idea2020註冊碼永久啟用(啟用到2100年)

linux命令之上傳檔案和下載檔案

lrzsz-0.12.20.tar.gz是一款linux下命令列介面上支援上傳和下載的第三方工具，能夠起到很方便的作用。

<p>MySQL 物理組成-日誌檔案和資料檔案</p>

上一小節，我們以一條查詢語句的執行流程，系統瞭解了 MySQL 的邏輯架構。那麼，MySQL 的物理組成是咋樣的呢？本文繼續從物理組成這個角度來介紹 MySQL，希望大家對 MySQL 的整體架構組成能有更全面的瞭解。

JS動畫和CSS動畫

一.js動畫和css動畫區別。 css實現動畫：animation transition transform js實現動畫：setInterval setTimeout requestAnimationFrame

使用webpack打包JS依賴庫

這裡的依賴庫是指給第三方平臺使用的JS庫檔案。與普通的web應用程式碼不同，依賴庫要正確設定匯出的內容

c#實現 ftp ;http;共享方式下載檔案並對比本地檔案和伺服器檔案的更新時間判斷性下載

轉載：https://www.cnblogs.com/Fengsp/archive/2012/08/06/2625149.html //從ftp伺服器上下載檔案的功能

文字檔案和二進位制檔案的區別和聯絡

技術標籤：資料型別ascii碼錶matlabnotepad++ 目錄預備知識檔案型別ASCII碼文字檔案和二進位制檔案字元型資料儲存區別原理MATLAB驗證

使用webpack打包js檔案和css檔案簡單示例

相關推薦