1.安裝
新建一個(gè)文件夾如webpack-demo，使用npm init 命令可以自動(dòng)創(chuàng)建這個(gè)package.json文件,這是一個(gè)標(biāo)準(zhǔn)的npm說(shuō)明文件，里面包含許多信息，包括當(dāng)前項(xiàng)目的依賴模塊，自定義的腳本任務(wù)等等。
為了方便也可以使用 npm init -y
2. 安裝webpack
2種選其中一個(gè)（推薦本地安裝）
全局安裝
npm install -g webpack
本地安裝
npm install webpack webpack-cli --save-dev
-dev代表安裝在開(kāi)發(fā)環(huán)境
如果出現(xiàn)報(bào)錯(cuò)，可以直接選擇安裝具體的版本，比如npm install --save-dev webpack@3.8.1
3. 開(kāi)始
現(xiàn)在我們的webpack-demo文件夾會(huì)有node_module這個(gè)文件和package.json文件。
我們?cè)诋?dāng)前目錄下新增index.html文件，src文件夾，并在src文件夾中增加index.js，得到下面這個(gè)文件目錄
webpack-demo文件夾
|- /node_module
|- package.json
+ |- /dist
|- index.html
+ |- /src
+ |- index.js
dist/index.html內(nèi)容如下
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
src/index.js 內(nèi)容如下
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());`
4.把本地 src/index.js 打包成 dist/bundle.js
通過(guò)命令./node_modules/.bin/webpack 入口路徑 打包路徑
比如：./node_modules/.bin/webpack src/index.js dist/bundle.js
那么問(wèn)題來(lái)了，如果文件很多這樣打包，命令行是不是顯得特別繁瑣。所以我們可以通過(guò)
配置文件的方式來(lái)打包，把入口文件和打包路徑寫(xiě)在webpack.config.js文件中.
5 webpack.config.js配置文件
在當(dāng)前目錄下新建一個(gè)webpack.config.js文件。
webpack.config.js文件內(nèi)容
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist') //打包后的地址
}
};
6 NPM Script
雖然文件名這個(gè)比較問(wèn)題解決了，但是.node_module/.bin/webpack其實(shí)寫(xiě)起來(lái)也很不方便，所以我們可以設(shè)置一個(gè)快捷方式。在 package.json 添加一個(gè) npm 腳本(npm script)：
打開(kāi)package.json文件：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" //npm script 會(huì)自己去找node_module下面的webpack，所以可以簡(jiǎn)寫(xiě)為webpack
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
現(xiàn)在，可以使用 npm run build 命令進(jìn)行打包了。
打包完成之后可以使用瀏覽器或者服務(wù)器，打開(kāi)dist/index.html
