vue-05-webpack安裝-vue單文件啟動
阿新 • • 發佈:2018-10-06
dev 工具 流程 save 部署 grunt 項目部 css 額外
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單文件啟動