上一篇文章簡(jiǎn)單介紹了一些webpack的概念逃呼，讓大家對(duì)webpack有一個(gè)初步的認(rèn)識(shí)。接下來(lái)我們一起來(lái)做一個(gè)實(shí)例借帘，讓大家體驗(yàn)一下。
1. 基本安裝
創(chuàng)建一個(gè)目錄webpack-demo 淌铐，初始化 npm肺然，以及在本地安裝 webpack .
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
創(chuàng)建以下目錄結(jié)構(gòu)和內(nèi)容
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- webpack.config.js
+ |- /src
+ |- index.js
//src/index.js
import _ from 'lodash';//引入lodash包
function component() {
var element = document.createElement('div');
// 這里使用Lodash的jion函數(shù)做字符串連接
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
//index.html
<html>
<head>
<title>Wepack Demo Hello</title>
</head>
<body>
</body>
</html>
<script src="./bundle.js"></script>
//webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
要在 index.js 中打包 lodash 依賴，我們需要在本地安裝 library腿准。
npm install --save lodash
如圖1际起，如果出現(xiàn)錯(cuò)誤提示【Import declaration are not supported by current Javascript version】。
1.jpg
[解決方案]：不要緊張吐葱，這個(gè)問(wèn)題不是webpack的問(wèn)題街望，而是你用了ES6的語(yǔ)法，或者你也跟我一樣使用的是webstorm2017弟跑，它默認(rèn)的javascript的5.1灾前，你需要手動(dòng)去把它設(shè)置成ES6,解決辦法【setting>Language & Frameworks>javascript】如圖2。
2.jpg
2. 執(zhí)行構(gòu)建
現(xiàn)在孟辑，讓我們嘗試執(zhí)行構(gòu)建
Hash: e3c728dc0b00da586b7c
Version: webpack 3.4.1
Time: 843ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 271 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
3.NPM 腳本
通常哎甲，我們可以在package.json里邊配置script，然后通過(guò)npm調(diào)用webpack執(zhí)行構(gòu)建
//package.json
{
...
"scripts": {
"build": "webpack"
},
...
}
npm run build
這時(shí)候我們就可以在打開(kāi)瀏覽器中饲嗽，看一下編譯之后的結(jié)果
image.png
學(xué)習(xí)源碼 webpack-demo
