1, webpack是什麽

1), 是一個打包工具,

比gulp, grunt更先進

2), 額外功能

項目部署上線, 清空目錄等

hot module reload, 頁面刷新後, 數據不變化

3), 打包流程

css, js等打包成bundle.js文件

js: babel-loader 來加載, 編譯

最終根據依賴關系生成app.js

split point: 將大文件分割為多個文件, 提升用戶體驗

2, webpack安裝

1), 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2), 檢查npm版本

npm -v

3), 安裝webpack到全局

npm install webpack -g

4), 生成package.json

npm init

5), 為項目添加webpack依賴

npm install webpack --save-dev

6), 將js編譯打包

webpack hello.js hello.bundle.js

7), 安裝css的loader轉換器和style的laoder轉換器

npm install css-loader style-loader --save-dev

8), 文件變化時, 自動編譯

webpack hello.js hello.bundle.js  --watch

3, 配置文件

webpack.json.js

# 引入webpack
const webpack = require(‘webpack‘);

# 遵循 commonjs規範
module.exports = {
　　

vue-05-webpack安裝-vue單文件啟動