前置條件
cnpm i -d webpack webpack-cli webpack-dev-server
cnpm i -d css-loader style-loader url-loader file-loader
cnpm i -d html-webpack-plugin clean-webpack-plugin
webpack.config.js
webpack <==> webpack --config webpack.config.js
webpack --config vue.config.js組成：
cnpm i -d babel-loader babel-core babel-preset-env babel-preset-react
預設：.babelrc.babelrc：es6解析的配置
例項:
+ public:
1[index.html]
+ src:
import react, from "react";
import img from "./asset/logo.png";
const home = ()=> home
//測試
constructor(...args)
}plus())
}render()
}}2[index.js]
import react from "react";
import reactdom from "react-dom";
+ [.babelrc] es6解析的配置
+ webpack.config.js 配置檔案
const path = require("path");
const htmlwebpackplugin = require('html-webpack-plugin');
const cleanwebpackplugin = require('clean-webpack-plugin');
module.exports =,
devserver:,
plugins: [
new cleanwebpackplugin(['./dist']),
new htmlwebpackplugin()
],module:,,}
]},]}
}+ [package.json] 工程檔案
, "keywords": ,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies":
}
cnpm i -d babel-loader babel-core babel-preset-env
cnpm i -d vue-loader vue-template-compiler
預設：.babelrc例項
}}cnpm i -d cross-env 相容環境變數
defineplugin mode設定開發者還是生產版本
mode:production 會自動壓縮**
自己手動壓縮**：
mode:development
cnpm i -d uglifyjs-webpack-plugin
vue專案目錄作用
1. build資料夾：打包配置的資料夾
1.1 webpack.base.conf.js ：打包的核心配置
1.2 build.js：構建生產版本，專案開發完成之後，通過build.js打包（載入base與prod，讀取完之後通過webjpack命令對專案進行打包）
1.3 webpack.prod.conf.js：被build.js呼叫，webpack生產包的乙個配置。基礎**都在1.1裡面寫，1.3是對1.1的擴充套件與補充
1.4 dev-client.js：熱更新的外掛程式，進行對客戶端進行過載
1.5 dev-server.js：伺服器。（背後的原理是啟動乙個express框架，這是乙個基於node做的乙個後端框架，後端框架可以在前端起乙個服務）
1.6 vue-loader.conf.js：被base載入，
1.7 utils.js：工具類，公共的配置
2. config資料夾：打包的配置，webpack對應的配置
2.1 index.js：可與1.1合併成乙個檔案，但由於spa想做乙個清晰的架構，因此把它們拆分開了
3. src資料夾：開發專案的原始碼
6. .babelrc：es6解析的配置
7. .gitignore：忽略某個或一組檔案git提交的乙個配置
8. index.html：單頁面的入口，通過webpack的打包構建之後，會對src原始碼進行編譯，最終把它們插入到html裡面來
9. package.json：基礎配置，告訴我們專案的資訊（版本號、專案姓名、依賴）
10. node_modulues：專案的安裝依賴
2018-08-17 09:04
飛刀還問情 閱讀(
...)
編輯收藏
自搭部落格日記2
後端技術選型 nodejs路由無框架，資料庫mongodb後續會考慮隔段時間加上mysql，連線用框架mongoose，路由在本人github上目前功能還很不完善，正在準備寫前端頁面，但是會一直更新。前端技術選型 vuejs react 原因 想學。想嘗試react疲憊的感覺 目前進度 確定了前端頁...
自搭ngrok伺服器
在阿里雲伺服器自己搭 ngrok 的伺服器，步驟基本跟著 1,2 一步步來，本人需要用到 這裡僅提幾點注意 我那個阿里雲伺服器有個網域名稱，在管理頁可以看的，生成證書時設定export ngrok domain 那個網域名稱 就是用這個網域名稱，後面 ngrokd 的執行引數 client 端的配置...
用webpack來取代browserify
本來打算一心跟著browserify走的，但是無奈它的transform機制令人煩躁。今天有這麼乙個需求，配置了一會，感覺用browserify搞不定。乙個react專案，我的jsx檔案需要編譯，於是jsx中會require react 但是我又不想在輸出的bundle.js中包含react那1.5...