webpack 基本配置
阿新 • • 發佈：2021-08-13
webpack 基本配置 和開發模式配置
安裝版本
(練習的版本) cnpm i [email protected] cnpm i [email protected] cnpm i [email protected] -d cnpm i [email protected] [email protected] -d cnpm i [email protected] [email protected] -d cnpm i [email protected] [email protected] -d cnpm i [email protected] -d cnpm i [email protected] -d
使用
webpack
npx webpack-dev-server
目錄結構
webpack.config.js 配置
/* loader 1.下載 2.使用（配置loader） plugins 1.下載 2.引入 3.使用 */ // resolve 用來拼接絕對路徑的方法 const { resolve } = require('path'); //引入 const htmlWebpackPlugin = require('html-webpack-plugin'); // 有五個核心配置 module.exports = { // webpack配置 entry: "./src/js/index.js",//入口起點 output: { filename: './js/built.js',//輸出檔名 (決定的是入口檔案的輸出路徑) // __dirname 是 nodejs的變數，代表當前檔案的目錄的絕對路徑（當前檔案的更目錄） path: resolve(__dirname, 'build'),//輸出路徑 輸出的根檔名稱 }, // loader配置 module: { //是個陣列 rules: [ { //詳細的loader配置 //匹配哪些檔案 test: /\.css$/, //所有.css結尾的檔案 use: [ //執行順序，從後往前（從下到上 或稱為從右到左） 'style-loader',//建立style標籤，將js（'css-loader中生成的樣式字串）中的樣式資源插入 ，新增到head中生效 'css-loader'//將css檔案變成commonjs模組載入到js中。以字串的形式（裡面的內容是樣式字串） ] }, { test:/\.less$/, use:[ //執行順序，從後往前（從下到上 或稱為從右到左） 'style-loader',//建立style標籤，將js（'css-loader中生成的樣式字串）中的樣式資源插入 ，新增到head中生效 'css-loader',//將css資源變成commonjs模組載入到js中。以字串的形式（裡面的內容是樣式字串） //需要下載 less-loader 和less 'less-loader'//將less資源轉成css資源 ] }, { test:/\.(jpg||png||gif)$/, //使用一個loader //下載url-loader 和 file-loader loader:'url-loader', options:{ //圖片大小小於8kb的時候，就會被base64處理 // base64優點：減小請求數量（減輕伺服器壓力），缺點：圖片體積變大（檔案請求變慢） limit:8*1024, // 注意：因為url-loader預設使用es6模組化解析的，而html-loader引入圖片是common.js // 解析時會出現問題：[object Module] // 解決:關閉url-loader的es6模組化，使用common.js解析 esModule:false, //給圖片重新命名 //[hash:10]取圖片的hash值的前10位 name:'[hash:10].[ext]', outputPath:'img'//符合當前匹配規則的檔案的輸出位置路徑 }, }, { test:/\.html$/, //處理html檔案中的img圖片（負責引入img，從而能被url-loader進行處理） loader:'html-loader', options:{ outputPath:"img"//符合當前匹配規則的檔案的輸出位置路徑 } }, //打包其他資源（除了html/js/css/等等資源以外的其他資源） { exclude:/\.(css||js||html||jpg||png||gif||less||json)$/, loader:'file-loader', options:{ //[hash:10]取圖片的hash值的前10位 name:'[hash:10].[ext]', outputPath:'file'//符合當前匹配規則的檔案的輸出位置路徑 }, } ] }, //plugins 的配置 是個陣列 plugins: [ // html-webpack-plugin // 功能，預設會建立一個空的html，引入打包輸出的所有的資源（js/css） new htmlWebpackPlugin( { //建立一個在記憶體中生成html頁面外掛的配置物件 template:'./src/index.html', //指定模版頁面生成記憶體中的hmtl filename:'index.html' //指定生成的頁面名稱 } ) ], //打包的模式 mode: 'development',//開發模式 // mode:'production',/生產模式 會壓縮程式碼 //開發伺服器 devServer :用來自動化（自動編譯，自動開啟瀏覽器，自動重新整理瀏覽器） //特點：只會在記憶體中編譯打包，不會有任何輸出 //啟動devServer指令為：npx webpack-dev-server devServer:{ contentBase:resolve(__dirname,'build'), //啟動gzip壓縮 compress:true, // 埠號 port:3000, open:true,//是否自動開啟瀏覽器（電腦預設瀏覽器） } }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="title">標題</div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <img style="width: 100px;height: 100px;" src="./img/1.png" alt=""> <div class="iconfont icon1"></div> <div class="iconfont icon2"></div> <div class="iconfont icon3"></div> <div class="iconfont icon4"></div> <div style="color:#ffffff" class="iconfont icon-baizhequn"></div> <div style="color:#ffffff" class="iconfont icon-beixin"></div> <div style="color:#ffffff" class="iconfont icon-niuziku"></div> <div style="color:#ffffff" class="iconfont icon-banshenqun"></div> <div>123</div> </body> </html>
index.js
import data from "../js/data.json"
import "../css/index.css"
import '../css/index.less'
import '../css/iconfont.css'
console.log(data);
function add(x,y) {
return x+y
}
console.log(add(2,4));
data.json
{
"name":"wang",
"age":"34"
}
index.css
body{
background-color: #d67272;
}
iconfont.css
@font-face {
font-family: 'iconfont';
src: url('https://at.alicdn.com/t/font_2741516_l60pt05ze8.woff2?t=1628771217262') format('woff2'),
url('https://at.alicdn.com/t/font_2741516_l60pt05ze8.woff?t=1628771217262') format('woff'),
url('https://at.alicdn.com/t/font_2741516_l60pt05ze8.ttf?t=1628771217262') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1:before{
content: "\e615";
}
.icon2:before{
content: "\e616";
}
.icon3:before{
content: "\e617";
}
.icon4:before{
content: "\e618";
}
@font-face {
font-family: "iconfont";
src: url('iconfont.ttf?t=1628772161191') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-baizhequn:before {
content: "\e615";
}
.icon-beixin:before {
content: "\e616";
}
.icon-niuziku:before {
content: "\e617";
}
.icon-banshenqun:before {
content: "\e618";
}
剩下的img檔案
自備三張就好
字型圖示檔案 iconfont
在iconfont網站上下載就好
https://www.iconfont.cn/
第二種：