webpack是什麼就不用多說，它的地位也顯而易見，今天我從零開始學習配置一下，以及和之前的配置方法做下簡單的比較。（雖然之前沒有配置過，但是也看過相關內容）。
準備工作
先創建一個新的項目，安裝基本的環境以及webpack。
mkdir webpack-pro
cd webpack-pro
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
這是我們可以在package.json文件中配置我們執行的命令，
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
入口與出口
此時我們運行npm run build其實就是執行了對應的webpack命令。但是發現報錯了，說找不到./src/index.js。之前版本的配置中需要指定webpack的入口和出口，現在可以不必配置了，會默認把項目中./src/index.js當做入口，./dist/main.js當做出口。這時只需要我們手動創建入口文件就可以了。
console.log("test"); //隨便寫一行代碼測試一下
這時再執行npm run build發現項目中生成了./dist/main.js文件。但是如果我就是不想使用默認入口和出口呢，我應該怎麼做呢？可以在配置執行命令的時候明確指定出入口。
"build": "webpack ./src/app.js --output ./target/main.js"
把之前生成的文件刪掉，入口文件改爲app.js再執行一次命令。發現生成的是我們指定的路徑了。
開發和生產環境
我們在使用npm安裝包的時候，有時候要加--save-dev有時候只加--save。這其實就是在package.json區分環境。如果不指定默認就是生產環境。
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"axios": "^0.18.0"
}
webpack4也引入了生產和開發兩個模式，我們可以這樣重新配置一下scripts來指定模式，
"scripts": {
"build": "webpack --mode production",
"dev": "webpack --mode development"
}
根據不同的環境執行不同的命令，會有不同的打包效果，我們分別測試一下，（我們就先改回使用默認的進出口文件）。
npm run dev
打包出來的文件代碼是沒有進行壓縮的，適合我們開發過程中調試。而：
npm run build
打包出來的是進行壓縮了的代碼，體積更小，適合生產環境使用。
babel的配置
之前也寫過一篇關於babel的文章（當然也是邊學習邊寫，有錯誤的地方歡迎指出），這裏babel的配置就不多說，主要看webpack的配置。
但目前爲止我們還沒有使用webpack的配置文件，這裏我們就使用一下，當然首先要安裝babel必須的包和進行基本的配置。
npm i @babel/core @babel/preset-env babel-loader --save-dev
在根目錄添加.babelrc配置文件
{
"presets": ["@babel/preset-env"]
}
1. 配置文件
接下來我們就可以創建一個webpack的配置文件了webpack.config.js。這裏指定對除了/node_modules目錄下的js文件使用babel-loader進行編譯。
module.exports = {
module: {
rules: [
{
test: '/.js$/',
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
我們在入口文件中寫個ES6的語法試一下：
const arr = [1, 2, 3];
執行npm run dev成功後查看目標文件中已經被轉換成ES5的語法：
eval("var arr = [1, 2, 3];\n\n//# sourceURL=webpack:///./src/index.js?");
2. scripts配置
其實指定使用特定的loader進行打包也可以在package.js的scripts中配置，但是這樣命令就會越來越複雜，一些配置還是放在配置文件更好一些。
"dev": "webpack --mode development --module-bind js=babel-loader"
配置React項目
我們只需要在之前配置的基礎上添加一些配置就可以了，這裏需要安裝@babel/preset-react來進行react語法的轉換，在.babelrc中進行配置：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
之前都還只是對js文件的編譯，當然還需要一個對html文件編譯的插件和loader，我們來下載一下：
npm i html-webpack-plugin html-loader --save-dev
這時重新對webpack配置文件進行配置，如果使用的jsx擴展，在配置loader的時候，多添加一個jsx匹配項就好了。然後我們配置html文件對應的插件和loader。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};
配置完成，我們來創建react的文件來測試一下：
.src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<p>React Test</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('app'));
./src/index.js
import App from './App';
現在我們執行npm run dev看下效果，發現自動生成了./dist/index.html，而且此文件中自動引入了./dist/main.js腳本，根本不需要自己在html文件引用。我用瀏覽器查看生成的頁面，react組件的內容顯示出來了。搞定！
CSS配置
前面html和js都用到了，當然不能少了css文件的編譯，同樣的我們需要下載相關的插件和loader。
npm i mini-css-extract-plugin css-loader --save-dev
然後我們創建一個css文件，並且在在入口文件中引用它（記得給html標籤加title類）。
./src/index.css
.title {
font-size: 30px;
}
./src/index.js
import App from './App';
import style from './index.css';
最後我們在配置文件中配置一下，和剛纔html的配置基本類似：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
....
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
我們再次運行npm run dev，打包出來的html文件引入了對應的目標css文件，瀏覽器查看，樣式生效。
開發自動化
經過前面的一些親自測試，所有結果都沒有什麼問題了，But，每次修改文件之後都要重新打包，然後還得手動刷新瀏覽器，這些工作其實都可以實現自動化，這裏用到webpack dev server。下載同之前一樣，命令就不寫了。
下載完成之後，我們這時再次回到package.json文件進行配置：
"dev": "webpack-dev-server --mode development --open"
我們把之前的webpack命令換成了webpack-dev-server，此時就相當於給我們的項目創建了一個服務，並實現了代碼熱更新，我們在瀏覽器訪問http://localhost:8080即可查看頁面效果。我們修改一下頁面代碼（比如加一行字），保存之後瀏覽器自動刷新，效果呈現。
--open參數就是在我們執行完npm run dev之後，自動幫我們打開瀏覽器訪問http://localhost:8080。更多配置可以去查看具體的使用文檔。