webpack4系列教材-入門
起步
使用yarn init 初始化一個基本項目
安裝依賴
進(jìn)入終端輸入
yarn add webpack
yarn add webpack-cli
由于webpack4官網(wǎng)要求需要多一個webpack-cli依賴
開始
在根目錄新建一個index.html肛度，main.js
如圖所示
-w189
index.html內(nèi)容如下垢油，假定打包文件叫bundle.js
<html>
<meta charset="utf-8">
<title>這是一個webpack示例項目</title>
<body>
<script src="bundle.js"></script>
</body>
</html>
main.js內(nèi)容如下
document.write('hello webpack')
webpack開始
在項目根目錄創(chuàng)建一個webpage.config.js
內(nèi)容
module.exports = {
mode:'production', //當(dāng)前模式為生產(chǎn)模式
entry: "./main.js", //入口文件
output: {
filename:'bundle.js', //輸出文件名
path:__dirname //node.js中全局變量,為當(dāng)前根目錄
}
}
啟動
方法一：在package.json加入以下內(nèi)容
"scripts": {
"start": "webpack --config webpack.config.js"
}
然后在終端執(zhí)行 yarn run start 即可
方法二：直接在終端執(zhí)行
npx webpack --config webpack.config.js
看到下列輸出蒂誉，就大功告成了Ｊ蕖！
-w435
打包完成６督觥坊夫！，webpage幫我們生成了一個bundle.js
-w195
來我們看成果
直接到瀏覽器打開根目錄index.html撤卢，看到輸出hello webpack!! 非常完美践樱！
-w615
