實踐webpack+es6+react+redux+antd構建專案(一) webpack配置
在網上看到過很多教程,都是從零開始構建一個專案,每次看著都浩浩蕩蕩的開始跟著部落格一步一步走,但是總是很難成功。自己一直想要從零構建一個專案來實踐一下,瞭解一下偏底層的配置。最近比較有時間,就又一次開始了。不過這次沒有盲目的在網上找教程,而是直接開啟官方文件webpack,開始實踐。
所以給大家的建議也是 學習就直接看官方文件就行,遇到問題再搜尋,整那些有的沒的,其實很浪費時間和精力。特別是學習配置這些知識,以官方文件,基本是沒有錯的。
寫在前面: 我儘量是按官方文件的構建流程寫的,加上了遇到的問題,如果你參考完但是並沒有成功構建,建議你還是去看官網,遇到問題自己google,其實都是可以解決的。加油
1、開始安裝
首先建立一個目錄,就是你專案的名稱,然後在本地安裝webpack環境
mkdir project-test && project-test
npm init -y
npm install webpack webpack-cli --save-dev
--save-dev 表示在本地的dev環境中安裝依賴
然後使用編輯器開啟,建立這幾個檔案
在根目錄建立 webpack.config.js,用於webpack配置。建立src/index.js,入口檔案;dist/index.html,出口檔案。
如下所示:
2、基本配置
首先了解webpack是幹什麼用的。
它是一個基於Node的模組打包器,js,css,less等都算是模組,它會識別這些模組然後將其打包成為合適的格式以供瀏覽器使用。也就是說通過入口檔案找到各個模組,使用loader(載入器)進行處理,然後打包成為一個瀏覽器可識別的js檔案(一般就是dist/dundle.js)
先來說簡單的入口,出口配置
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }
執行webpack命令不是很方便,於是採取 npm 指令碼的方式執行,在package.json配置如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
之後可以直接 npm run start 來執行專案。
目前為止只是配置了webpack的出入口打包配置。但是檔案中都沒有寫內容,所以也看不到專案啟動的頁面。
所以來寫一點東西看看吧。
src/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = 'hello';
return element;
}
document.body.appendChild(component());
dist/index.html
<!doctype html>
<html>
<head>
<title>project-test</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
執行 npm run start ,此時是沒有devServer的,所以不能通過服務看到頁面,需要手動開啟 dist/index.html頁面,就可以看到頁面的正常顯示。
3、配置devServer
最想要的還是可以直接啟動專案,在程式碼發生變化後自動編譯程式碼,而不是手動開啟,所以就要配置個server來實現,先說簡單的server配置,關於熱過載的東西稍後再說.
webpack-dev-server 提供了一個簡單的伺服器,可以實時重新載入
npm install --save-dev webpack-dev-server
在webpack.config.js中配置如下:
devServer: {
// 預設 localhost
host: 'localhost',
port: 9000,
// 實現實時更新,
// 告訴dev server 在哪裡查詢檔案
contentBase: './dist'
}
在package.json中修改start配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
然後 npm run start 就可以看到在devServer服務上啟動的專案了。可以實現自動重新整理,你修改src/index.js檔案,可以實時反應在頁面上。
接下來是webpack項的其餘配置,用於專案更好的執行和除錯。
3.1使用source map
// 編譯後對映到原始碼,方便錯誤除錯
devtool: 'inline-source-map',
3.2設定HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
這個就是關於在dist/index.html檔案中引入js檔案的,因為往往手動引入一個bundle.js是不能滿足需求的。
雖然在 dist/
資料夾我們已經有 index.html
這個檔案,然而 HtmlWebpackPlugin
還是會預設生成 index.html
檔案。這就是說,它會用新生成的 index.html
檔案,把我們的原來的替換
也就是說它會替換index.html,但是你又不能不寫。
在webpack.config.js中配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports 中新增
plugins: [
new HtmlWebpackPlugin({
title: 'project-test'
})
],
3.3 清理/dist資料夾
npm install clean-webpack-plugin --save-dev
用於清理dist中冗餘的檔案
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'project-test'
})
],
但是我在實踐的時候遇到了dist資料夾直接就被刪除了的問題,所以初次構建的同學可以忽略此項。
4、引入各種依賴
主要的配置就是webpack依賴項,所以就是不斷的安裝依賴,並正確的使用這些依賴。
4.1 引入css/less
npm install --save-dev style-loader css-loader
npm install --save-dev less less-loader
// webpack 自身只能理解js,引入loader可以將所有型別的檔案轉換為webpack可以識別的有效模組。
// loader有兩個目標,
// test 用於標識出應該被對應的 loader 進行轉換的某個或某些檔案
// use 表示進行轉換時,應該使用哪個 loader。
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
有人肯定就會疑問了,css和less有這麼多重複的配置,為什麼不寫在一起呢?誒,是個好問題,我有嘗試寫在一起,但是總是載入不成功,但確實是可以寫在一起的,想法沒有問題,之後有時間實踐一下。
4.2 載入圖片/字型
npm install --save-dev file-loader
在rules中新增
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
現在一起來嘗試一下這些依賴。
在src檔案中新增一個index.less
.changeColor {
color: red;
}
在index.js中引入
import './index.less'
function component() {
var element = document.createElement('div');
element.innerHTML = 'hedfsdddfdssdsllo';
element.classList.add('changeColor');
return element;
}
document.body.appendChild(component());
可以看到頁面上的字型是紅色的了。
4.3 模組熱替換配置
允許在執行時更新各種模組,而無需進行完全重新整理
const webpack = require('webpack');
devServer: {
...
hot: true
},
plugins: [
...
new webpack.HotModuleReplacementPlugin()
]
具體有什麼用,其實我目前也沒有太搞明白。
4.4 環境區分
// 啟用相應模式(development,production)下的webpack內建的優化
mode: 'development'
/**
* 開發環境(development)和生產環境(production)的構建目標差異很大。
* 在開發環境中,我們需要具有強大的、具有實時重新載入(live reloading)
* 或熱模組替換(hot module replacement)能力的 source map 和 localhost server。
* 而在生產環境中,我們的目標則轉向於關注更小的 bundle,更輕量的 source map,以及更優化的資源,以改善載入時間。
* 由於要遵循邏輯分離,我們通常建議為每個環境編寫彼此獨立的 webpack 配置。
*/
所以建議是區分開發環境和生產環境
npm install --save-dev webpack-merge
但是這裡我還並沒有搞得太清楚,就之後再議吧。
對於webpack構建基本專案就到這裡!有什麼疑問的地方都可以留言。
之後系列將引入react,redux,es6,antd等,逐漸構建一個完整的前端專案。
連結: 實踐webpack+es6+react+redux+antd構建專案(二) react,redux,antd引入
關注我獲取更多前端資源和經驗分享
關注後回覆 vivi 獲取我的微訊號,望不吝賜教,pps:可輕撩哈哈
感謝大佬們閱讀,希望大家頭髮濃密,睡眠良好,情緒穩定,早日實現財富自由~