webpack and vue 應用

webpack 學習

簡單了解使用

可以兼容amd,cmd,es6 的寫法

在開發環境中使用壓縮文件

為了不讓 Webpack 去遍歷 React JS 及其所有依賴，你可以在開發中重寫它的行為 var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); resolve: { alias: { 'react': pathToReact } }, noParse: [pathToReact]

運行應用

設置 package.json scripts

#例子1

• 安裝npm webpack

• "scripts": { "build": "webpack" }

• npm run build==webpack 進行編譯運行(注意 NPM 會找到 Webpack，npm run 會把他臨時加到 PATH來讓我們這個神奇的命令工作)

#例子2

• 一直npm run build(webpack)蛋疼,不夠智能,自動編譯--->服務webpack-dev-serve
• { "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } }

1.webpack-dev-server - 在 localhost:8080 建立一個 Web 服務器

2.--devtool eval - 為你的代碼創建源地址。當有任何報錯的時候可以讓你更加精確地定位到文件和行號

3.--progress - 顯示合并代碼進度

4.--colors - Yay，命令行中顯示顏色！

5.--content-base build - 指向設置的輸出目錄

• 總的來說，當你運行 npm run dev 的時候，會啟動一個 Web 服務器，然后監聽文件修改，然后自動重新合并你的代碼。真的非常簡潔！用于解決方案一的弊端

#例子3(創建生產配置)

"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", "prd": "NODE_ENV=prduction webpack -p --config webpack.production.config.js" }, "devDependencies": { "webpack": "^1.4.13", "webpack-dev-server": "^1.6.6" }, "dependencies": {} [學習小記]--save-dev和--save區別 前者放在devDependencies里面,后者放在package.json 的dependencies【表面】，產品模式用dependencies，開發模式用devDep 正如你所見，我們只是用生產參數運行 Webpack 來指向另一個配置文件。我們也使用了環境變量 “production” 來讓我們的模塊自動去優化。讓我們開始來創建配置文件。

當項目越發復雜的時候，這樣的方法會變得越來越有效。你可以把所有復雜的操作隱藏在 scripts 里面來保證界面的簡潔。 但是有些命令只能運行特殊環境(存在環境不兼容問題)，使用gulp-webpack--->使用gulp通過gulp-webpack啟動gulp-webpack.

vue 學習

組件使用

1.定義 var myComponent=Vue.extend({//...});

var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

2.注冊 Vue.component('my-component',myComponent);

Vue.component('my-component', MyComponent)

3.使用 HTML

Html

<my-component></my-component>
new Vue({
  el: '#example'
})

==>

<div id="example">
  <div>A custom component!</div>
</div>

定義和注冊

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

局部組件

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> 只能用在父組件模板內
    'my-component': Child
  }
})

var Parent = Vue.extend({
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

項目地址： https://github.com/weiqingting/vue-webpack-spm