首先需要webpack工具:
npm i webpack -s
然後就是打包圖片用到的file-loader
npm i file-loader -s
最後就是打包css用到的css-loader(加載.css文件)、style-loader(使用<style>將css-loader內部樣式注入到我們的HTML頁面)
npm install style-loader css-loader -s
現在開始添加項目文件，一下是我自己的項目基本結構
首頁，添加webpack.config.js文件，目錄/build/webpack.config.js，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者通過 --config 選項來指定配置文件
const config = {
mode: 'development',//mode：模式，development：開發模式。會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。
entry: '../src/main.js',//入口文件 可以是多個，打包後對應多個文件
output: {
filename: '[name].js',//出口文件名稱
path: __dirname + '/../dist'//出口文件存放目錄，無則自動創建
},
module: {
rules: [ // 其中包含各種loader的使用規則
{
test: /\.css$/, // 正則表達式，表示打包.css後綴的文件
use: ['style-loader', 'css-loader'], // 針對css文件使用的loader，注意有先後順序，數組項越靠後越先執行
},
{
test: /\.(png|jpg|gif|svg)$/,
use: {
loader: "file-loader",
options: {
outputPath: '/static/images/',//輸入文件目錄
limit: 2048 //當圖片大小超過2048個字節的時候，將打包的圖片存在/static/images/文件夾中，否則直接改爲base64格式放在mian.js中，可以減少http請求
}
}
}
]
},
watch: true // 監聽文件改動並自動打包
};
module.exports = config;
然後添加main.js文件，目錄/src/main.js，該文件是打包入口文件
let _merge = require('../static/js/index.js'); //引入js
let _jpg = require('../static/images/top.jpg'); //引入圖片
let _css = require('../static/css/index.css'); //引入css
//渲染圖片
document.getElementsByTagName('body')[0].innerHTML = `<img src="../dist${_jpg}" />`;
對應的靜態文件
index.css
body{
background-color: black;
widows: 100vw;
height: 100vh;
}
img{
display: block;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
top.jpg
index.js
console.log('這是打包後的代碼');
最後添加一個index.html 在瀏覽器執行打包後的代碼
<html>
<head data-n-head="">
<title data-n-head="true">網站標題</title>
<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="keywords" content="網站搜索關鍵字">
<meta data-n-head="true" data-hid="description" name="description" content="網站描述">
</head>
<body>
<script src="../dist/main.js"></script>
</body>
</html>
打開控制檯，到/build目錄下執行 webpack，輸出結果爲：
在瀏覽器中打開/src/index.html文件，最終效果如下：
至此，一個簡單的webpack打包流程已完成，希望對各位有所幫助。
你千萬不要見怪，城市是一個幾百萬人一起孤獨生活的地方。
——梭羅