首先我們忘記webpack，然後我們現在搭建一個項目
項目結構
webpack-demo
+ |- index.html
+ |- index.js
+ |- style.less
- 項目就這麼簡單，一個html入口，包含一個js文件和一個css文件，簡單就構造一個前端項目了。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一個webpack項目</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.less">
</head>
<body>
<h1>hello world</h1>
<div class="box">
<p>我是一個div</p>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
// 引入js資源
import $ from 'jquery';
// 引入樣式資源
import './index.less';
// 引入圖片、字體等其他資源
$('#box1').click(() => {
$('#box1').css('backgroundColor', 'deeppink');
});
style.less
body {
.box {
background-color: red;
color: white;
}
}
- 問題來了，這玩意兒能跑起來？當然不能，麻雀雖小卻五臟俱全哈，從less到箭頭函數，從jquery到Es6哈。怎麼跑起來呢？構建工具就誕生了！
我們需要一個構建工具來整合整個項目，把es6的東西轉換成es5，把less轉換成css，下載其他依賴，這樣把整個項目運行起來。
構建工具
- 市場上的構建工具比較廣爲人知的就三四個，gulp，grunt，webpack，而前兩者更輕量，目前已經開始走另外的路了，webpack已經成爲當下最流行的構建工具了，所以我們今天就學最流行的。
webpack入門
核心概念：（可點擊跳轉官網哈。）
安裝webpack
- 這一步大家自己去找，官網上也有安裝步驟，無非是node.js npm webpack-cli
項目配置webpack依賴
1、配置，直接回車回車回車。
npm init
運行成功後我們的項目應該變成了這樣：
webpack-demo
+ |- index.html
+ |- index.js
+ |- style.less
+ |- package.json
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "z_d_f",
"license": "ISC"
}
節省時間直接給你建立一個比較齊全且配置不錯的項目
項目結構
webpack-demo
+ |- dist
+ |- src
+ |- index.js
+ |- style.less
+ |- index.html
+ |- package.json
+ |- webpack.config.json
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一個webpack項目</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>hello world</h1>
<div class="box">
<p>我是一個div</p>
</div>
</body>
</html>
src/style.less
body {
.box {
background-color: red;
color: white;
}
}
webpack.config.json
/*
webpack.config.js webpack的配置文件
作用: 指示 webpack 幹哪些活（當你運行 webpack 指令時，會加載裏面的配置）
所有構建工具都是基於nodejs平臺運行的~模塊化默認採用commonjs。
*/
// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
// webpack配置
// 入口起點
entry: './src/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'bundle.js',
// 輸出路徑
// __dirname nodejs的變量，代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'dist')
},
// loader的配置
module: {
rules: [
// 詳細loader配置
// 不同文件必須配置不同loader處理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader進行處理
use: [
// use數組中loader執行順序：從右到左，從下到上 依次執行
// 創建style標籤，將js中的樣式資源插入進行，添加到head中生效
'style-loader',
// 將css文件變成commonjs模塊加載js中，裏面內容是樣式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 將less文件編譯成css文件
// 需要下載 less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 詳細plugins的配置
new CleanWebpackPlugin(),
// plugins的配置
// html-webpack-plugin
// 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）
// 需求：需要有結構的HTML文件
new HtmlWebpackPlugin({
// 複製 './index.html' 文件，並自動引入打包輸出的所有資源（JS/CSS）
template: './index.html',
title: '一個簡單的webpack應用程序',
})
],
// 模式
mode: 'development', // 開發模式
// mode: 'production'
}
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "z_d_f",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.6",
"html-webpack-plugin": "^5.3.1",
"jquery": "^3.6.0",
"less": "^4.1.1",
"less-loader": "^9.1.0",
"style-loader": "^2.0.0",
"webpack-cli": "^4.7.2"
}
}
npm安裝的依賴
npm i jquery -D
npm i clean-webpack-plugin -D
npm i html-webpack-plugin -D
npm i less less-loader -D
npm i css-loader style-loader -D
運行webpack成功的話應該如下
可以看到整個項目的js文件，less文件都被打包到了一個html界面。非常nice吧，這就是構建工具，能理解webpack是幹啥的了嗎？