摘要：上以章節(jié)了解到了webpack是干什么的以及webpack有那些核心內(nèi)容，從此章節(jié)開始學(xué)習(xí)webpack中的核心內(nèi)容如何使用以及所起的作用晦嵌。從配置文件中學(xué)習(xí)對應(yīng)的核心點(diǎn)同辣。
一拷姿、Using a Configuration（使用配置文件來學(xué)習(xí)）
???As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file. This is much more efficient than having to manually type in a lot of commands in the terminal, so let's create one to replace the CLI line options used above:大概意思為：從版本4開始惭载，webpack不需要任何配置，但大多數(shù)項(xiàng)目都需要更復(fù)雜的設(shè)置响巢，這就是webpack支持配置文件的原因描滔。 這比在終端中手動輸入許多命令更有效率，因此我們創(chuàng)建一個替換上面使用的CLI行選項(xiàng)踪古。
step1:
在項(xiàng)目根目錄下創(chuàng)建一個webpack.config.js,內(nèi)容如下：
const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件含长，這里和默認(rèn)的一樣， output: { filename: 'main.js', // 輸出文件名 path: path.resolve(__dirname, 'dist') // 輸出文件的路徑 } };
step2 運(yùn)行如下命令
npm webpack --config webpack.config.js這里--cinfig 可以指定配置文件名伏穆，因此配置文件名不一定是webpack.config.js拘泞， 其他名稱也可以，只要在--cofig的時候?qū)懻_即可枕扫，比如配置文件名改為webpack.base.config.js 在運(yùn)行的時候用 npm webpack --config webpack.base.config.js 也是可以的陪腌。但是webpack.config.js存在，但是在運(yùn)行的時候沒有用--config來指定烟瞧，則默認(rèn)為webpack.config.js這個文件诗鸭，當(dāng)然默認(rèn)的文件名最好不要改。編譯成功后打開瀏覽器就可以看到會打印出一個Hello webpack参滴。
???由于從CLI運(yùn)行webpack的本地副本并不是特別有趣强岸，我們可以設(shè)置一個小捷徑。 讓我們通過添加一個npm腳本來調(diào)整我們的package.json：
修改package.json:里面增加這么一句 "build": "webpack"
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", // 這一行刪除 "private": true, // 新添加這一行 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" // 這是增加的 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.8.3", "webpack-cli": "^2.1.3" } }
修改成功后運(yùn)行npm run build砾赔，也有同樣的效果蝌箍。這種方式推薦青灼。
二、結(jié)論
到這里已經(jīng)一步步配置了最基本的配置文件妓盲，也是webpack配置構(gòu)建的第一步聚至，從下章節(jié)開始學(xué)習(xí)資產(chǎn)管理，就是說對項(xiàng)目中的資產(chǎn)進(jìn)行管理本橙，像圖片扳躬，字體，樣式等等甚亭，通過webpack來管理贷币。
