已經(jīng)習(xí)慣了直接用腳手架，快要忘記如何自己配置webpack了，今天，跟著網(wǎng)上的多篇教程，一步一步跟著走了一遍，很多事情似乎明朗了不少。
webpack的用途
webpack可以打包各種我們?nèi)粘ｍ椖恐行枰玫降囊蕾嚢?，并將其轉(zhuǎn)化為瀏覽器認(rèn)識的代碼。webpack的工作方式是：指定一個入口文件，通過這個入口文件開始找，找到整個項目所有的依賴文件，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。
開始配置webpack4
1、首先在某個盤下創(chuàng)建一個文件夾，或者直接用命令行創(chuàng)建：
mkdir webpack-test && cd $_
2、npm初始化webpack-test，初始化成功后你的文件里會出現(xiàn)package.json文件:
npm init -y //-y是直接默認(rèn)，不需要一遍遍的按回車
3、安裝webpack和webpack-cli
npm i webpack webpack-cli --save-dev
4、設(shè)置package.json文件的scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
此時可以在命令行運行npm run build，會發(fā)現(xiàn)有報錯：
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
報錯原因是因為沒有找到入口文件，在老版本的webpack里，需要自己去指定入口文件以及出口文件，步驟是：在項目根目錄下創(chuàng)建webpack.config.js文件，文件代碼如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后輸出文件的文件名
}
}
而在webpack4，你不需要在去指定入口文件和出口文件了，入口文件默認(rèn)是根目錄下src文件夾里面的index.js，文件打包后會默認(rèn)生成dist文件夾，方便了很多。
開發(fā)模式和生產(chǎn)模式
在webpack的老版本中，我們需要自己在創(chuàng)建一個webpack.production.config.js文件，也就是說，開發(fā)模式一個文件，生產(chǎn)模式還要創(chuàng)建一個文件，但是在webpack4不在需要這樣做了，我們可以在package.json文件中做如下修改：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
如果想要修改入口文件和出口文件，可以在webpack.config.js里設(shè)置entry和output，也可以通過修改package.json文件達(dá)到同樣的效果：
"scripts": {
"dev": "webpack --mode development ./webpack-test/app/main.js --output ./public/bundle.js",
"build": "webpack --mode production ./webpack-test/app/main.js --output ./public/bundle.js"
}
Babel
webpack通過各種loader去將文件轉(zhuǎn)換成瀏覽器認(rèn)識的代碼，比如es6轉(zhuǎn)成es5，react的jsx文件轉(zhuǎn)成js，用到的loader都是需要自己安裝的：
npm i babel-core babel-loader babel-preset-env babel-preset-react react-dom react --save-dev
安裝完成后需要對webpack.config.js進行相應(yīng)的配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
接下來在src文件夾下創(chuàng)建一個App.js文件，可以在這個文件中寫入jsx和es6的語法，測試webpack好不好用：
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React herfasd</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
在src/index.js中引入App，然后npm run build，在dist文件夾中打開index.html，不出意外，你能夠看到“react herfasd”
截至目前為止，每一次更改都需要去dist下找到index.html文件，并且重新npm run build才能看到更改之后的效果，所以我們還缺一個webpack-dev-server：
npm i webpack-dev-server --save-dev
安裝成功以后在package.json文件中做如下修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
這一次，只要更改文件，瀏覽器就會直接看到修改以后的效果，非常便于開發(fā)。
插件plugin
html、css
npm i html-webpack-plugin html-loader mini-css-extract-plugin css-loader --save-dev
注：mini-css-extract-plugin只適用于webpcak4.2以上的。
webpack.config.js配置如下：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
自行增加css文件和html文件查看效果。
參考網(wǎng)址：https://juejin.im/post/5af934806fb9a07ab458bced#heading-7
