實踐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-loadernpm 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：可輕撩哈哈
感謝大佬們閱讀，希望大家頭髮濃密，睡眠良好，情緒穩定，早日實現財富自由~