安裝步驟
前提
預先安裝好npm環境，參考官網下載並安裝node.js,設置環境變量。
控制檯安裝基礎環境
<1>新建項目工程test-web-vuewebpack-demo
cd .... #先進入工作空間目錄
mkdir test-web-vuewebpack-demo #創建目錄
cd test-web-vuewebpack-demo #進入該目錄
<2>初始化package.json文件
npm init -y
<3>安裝依賴包到當前工程
npm install webpack webpack-cli --save-dev
<4>新增以下目錄結構、文件和內容：
#新增dist/indx.thml,src/index.js文件
test-web-vuewebpack-demo
|- package.json
+ |- /dist
+ |- index.html
+ |- /src
+ |- index.js
文件src/index.js內容如下：
function component() {
let element = document.createElement('div');
// lodash（目前通過一個 script 引入）對於執行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
文件index.html如下：
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
<5>調整 package.json 文件，以便確保我們安裝包是 private(私有的)，並且移除 main 入口。這可以防止意外發布你的代碼。
//如下新增"private": true,刪除"main": "index.js",
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
<6>要在 index.js 中裝入 lodash 依賴，我們需要在本地安裝 library：
npm install --save lodash
之後，在我們的 script 中 import lodash：
+ import _ from 'lodash';
+
function component() {
let element = document.createElement('div');
- // lodash（目前通過一個 script 引入）對於執行這一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
<7>執行命令
npx webpack #會生成/dist/main.js文件
配置警告（是正常的），此時瀏覽器打開index.html
可以輸出：‘Hello webpack’。
<8>創建一個配置文件：webpack.config.js
#在 webpack v4 中，可以無須任何配置，然而大多數項目會需要很複雜的設置，
#這就是爲什麼 webpack 仍然要支持 配置文件。
#這比在 terminal(終端) 中手動輸入大量命令要高效的多，所以讓我們創建一個配置文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
<9>通過配置文件重新構建：
#如果 webpack.config.js 存在，則 webpack 命令將默認選擇使用它。我們在這裏使用 --config 選項只是向你表明，可以傳遞任何名稱的配置文件。這對於需要拆分成多個文件的複雜配置是非常有用。
npx webpack --config webpack.config.js
<10>針對於npx命令，其實有更好選擇：可以修改package.json腳本 添加 “build”: “webpack”
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.5"
}
}
之後執行：
#通過在 npm run build 命令和你的參數之間添加兩個中橫線，可以將自定義參數傳遞給 webpack，例如：npm run build -- --colors。
npm run build
總結：現在，你已經有了一個基礎構建配置。
