?從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個靜態(tài)文件，減少了頁面的請求.

?下面舉個例子 ：

main.js

我們只命名導(dǎo)出一個變量

export const name="老六"

index.js

import { name } from "./tset/main";
console.log(name+"-------------------"+name)

?這里使用的是es6規(guī)范 所以我們需要降級到es5??

先下載webpack

? ?npm -i install webpack webapck-cli --save -dev

下載完畢后配置一下入口與出口

這里的入口和出口就是說 打包哪個項目? ? 打包后輸出到哪里

先打開下載好的package.json 添加一下內(nèi)容

這里設(shè)置一下打包方式為webpack??

{"scripts": {"build":"webpack"}

再配置webpack的出入口：

新建webpack.config.js

const path = require('path');module.exports = {
//默認導(dǎo)出entry: './index.js',
//入口 entry 設(shè)置要打包的項目output: {path: path.resolve(__dirname, 'dist'),
//打包之后的輸出地址filename: 'bundle.js',
//打包之后的新文件名字}
};

然后我們直接 終端輸入 webpack

就會自動打包并且生成打包后的文件：

?

?

?好的到這里最基本的打包就完成了 其他文件的打包會更新出來

?