webpack入門高階(2)

2022-08-19 18:39:10 字數 3031 閱讀 3033

webpack-dev-server是我們在開發階段需要用到的乙個伺服器,它會把**打包到記憶體,我們可以通過http的方式訪問到打包到記憶體的**

安裝

npm i [email protected] -d
修改package.json的啟動命令

"dev": "webpack-dev-server --env.production --config ./build/webpack.base.js"
增加相關配置

webpack.dev.js

const path = require("path")

module.exports =

}

在前面webpack-dev-server中,我們設定的啟動訪問路徑是專案下的dist目錄,我們需要在這個dist目錄下手動去建立乙個index.html檔案,並且將打包後的js檔案手動新增到index.html檔案中,這個時候,我們通過瀏覽器訪問才能看到效果,在開發中,能用工具做的事情我們盡量用工具幫我們完成,我們可以使用 html-webpack-plugin 這個外掛程式來幫我們做這件事情,它的作用就是根據模版檔案生成乙個靜態檔案,然後自動將打包好的js插入到這個 html檔案中

首先,安裝這個外掛程式

npm i [email protected] -d
增加相關配置

const dev = require("../build/webpack.dev")

const prod = require("../build/webpack.prod")

const path = require("path")

const merge = require("webpack-merge")

const htmlwebpackplugin = require("html-webpack-plugin")

module.exports = function(env) ,

plugins: [

new htmlwebpackplugin(})]

} if (isdev) else

}

注意,如果要使用配置中的title,模版中需要使用這種方式來獲取title值

當我們執行打包操作,自動生成乙個打包檔案,如果前面有已經生成的檔案,我們通常會手動去刪除前一次已經生成的檔案,以避免產生混亂,這個時候可以使用clean-webpack-plugin來幫我們完成這個操作

安裝

npm i [email protected] -d
增加相關配置

const dev = require("../build/webpack.dev")

const prod = require("../build/webpack.prod")

const path = require("path")

const merge = require("webpack-merge")

const htmlwebpackplugin = require("html-webpack-plugin")

const = require("clean-webpack-plugin")

module.exports = function(env) ,

plugins: [

new htmlwebpackplugin(

}),// 每次打包之前,先清除dist目錄下的檔案

new cleanwebpackplugin()

]} if (isdev) else

}

解析css檔案需要兩個loader,css-loader和style-loader,css-loader的作用就是解析css的語法,解析完成後傳給style-loader, style-loader就會生成style標籤,然後把這些css**插入到html檔案中,這樣在html就會有樣式了

npm i [email protected] [email protected] -d
配置檔案中增加配置專案

const dev = require("../build/webpack.dev")

const prod = require("../build/webpack.prod")

const path = require("path")

const merge = require("webpack-merge")

const htmlwebpackplugin = require("html-webpack-plugin")

const = require("clean-webpack-plugin")

module.exports = function(env) ,

// 每個檔案都稱為模組,module就是用來配置解析各種檔案模組的,module裡面主要涉及到幾個問題,1 哪些模組檔案需要被轉換? 2 用什麼loader去轉? 3 用什麼規則去轉?

module: ,]},

plugins: [

new htmlwebpackplugin(

}),// 每次打包之前,先清除dist目錄下的檔案

new cleanwebpackplugin()

]} if (isdev) else

}

注意: loader的寫法有三種: 1、字串 2 陣列 3、物件 前面我們使用的就是字串的形式

實際上,在沒有對loader進行引數配置的時候,多個loader 我們更傾向於第二種寫法,給loader傳乙個陣列

module: 

]},

注意: css-loader和style-loader是需要注意使用順序的,如果配置成字串的形式,css-loader要放在下面,如果配置成陣列的形式,css-loader要放在前面,順序不正確會報錯

webpack入門高階(3)

sass這種css預處理器是以.scss結尾,需要用node sass和sass loader來處理 安裝loader npm i node sass sass loader dwebapck.base.js module 注意 如果出現css檔案中引入sass檔案的情況,只用css loader是...

webpack入門高階(1)

初始化專案 mkdir webpack demo cd webpack demo npm init y安裝webpack npm i webpack 4.41.0 webpack cli 3.3.9 d零配置使用webpack,webpack約束源檔案目錄必須為src,預設配置檔案為 src ind...

webpack入門到高階(七) devtool

此選項控制是否生成,以及如何生成 source map。一,為什麼要控制source map的生成?我們在開發的過程中,難免會遇到專案執行的報錯資訊,我們習慣於經常開啟控制台,找到報錯的檔案,檢視報錯區域內容,方便我們更好的開發專案,因此sourcemap出現了,它就是為了解決不好調式 問題的。二,...