webpack打包應用和實現

1)安裝webpack

$ npm install webpack webpack-cli --save-dev

2)添加配置文件 webpack.config.js

3) 為package.json添加腳本

項目信息
依賴信息
產品依賴 --save
開發依賴 --save-dev
腳本信息
scripts

4) 執行打包

$ npm run build 出現dist文件夾

因為webpack僅僅負責打包，對es6還未進行轉換，所以還需安裝babel，進行打包的啥時候轉換為es5

5) 安裝babel-core babel-loader

$ npm install babel-core babel-loader --save--dev

6) 安裝預設 babel-preset-latest

$ npm install babel-preset-latest --save-dev

7) 配置babel的配置文件 .babelrc

vi .babelrc
{
"presets":["latest"]
}

8) 在webpack中集成

開發一個模塊項目的過程
1. 創建模塊項目
2. 使用模塊化進行編程
3. 打包模塊形成 bundle.js
4. 將bundle.js集成到index.html中
5. 在瀏覽器上運行

webpack實現模塊化打包