webpack配置

安裝babel

# 安裝babel,編譯ES6語法

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2

// 使用babel,編譯ES6語法

{test: /\.js$/, loader: 'babel?presets=es2015', exclude: /node_modules/ }

 

圖片路徑與打包

# 安裝引入圖片須要依賴url-loader的加載器

cnpm install --save-dev url-loader

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: '[name].[hash:7].[ext]' } }

 

 

樣式引入打包 scss文件編譯

cnpm install --save-dev css-loader sass-loader cssnext-loader cnpm install --save-dev node-sass

// 打包引入樣式

{ test: /\.css$/, loader: "css-loader?sourceMap!cssnext-loader" },

// scss文件編譯 { test: /\.scss$/, loader: "css-loader?sourceMap!sass-loader!cssnext-loader" }

 

//推薦個vue全家桶  ，我也是剛clone下來，可是看了做者的效果圖，感受乾貨滿滿

vue2.x Cnode社區是基於vue、vue-router、vuex、axios、es6開發，使用webpack構建工具編譯打包項目http://www.vue-js.com/topic/58ae7fc2a9c1282817afc2e0

下載 && 啓動

# 克隆項目 git clone https://github.com/vincentSea/vue2.x-Cnode.git # 安裝依賴 npm install # 啓動開發環境 npm run dev # 打包項目 npm run build