其他loader：CSS-loader、url-loader、html-loader等 先來了解一下模塊的概念，比如在nodeJS中，有require和exports關鍵字。
很早有個broserify，是個js模塊加載器。 現在流行的是webpack，因為它不光你能加載js文件，還可以是css文件或圖片等資源。 webpack，我們可以認為也是更加高級的模塊假期，圍繞它一切東西都是模塊。
這些loader是干嘛的？ 我們知道在html中，我們引入css文件是link標簽， 但比如我們需要
這還是不太逆天了？其實這就是需要css-loader來處理了。
在Vue開發中，有.vue文件，vue-loader就是用來加載這類文件的，然后在通過webpack打包編譯成我們瀏覽器認識的代碼。vue-loader是基于webpack的。
.vue文件就是放置vue的組件代碼，結構如下：
<template> //html</template><style>//css</style><script>//js</script>webpack是模塊分開寫，最后打包在一起。 簡單的目錄結構如下：
|-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件(項目依賴、名稱、配置)，npm init –yes 生成此文件 |-webpack.config.js webpack的配置文件
1.執行：npm init --yes 
執行成功之后，項目目錄結構如下： 
2.webpack配置文件webpack.config.js，內容如下：
下載安裝:
npm install webpack --save -devnpm install webpack-dev-server --save -dev安裝完成之后，根目錄下就會多一個node_modules文件夾，其中有n多子文件夾。
因為我們前面已經寫好了webpack所需的配置文件，這時候在終端執行命令：webpack 就會生成build.js 文件 
但在實際開發中，為了更加方便，我們可以做如下配置，修改工程文件package.json添加scripts：
這樣我們只需要在終端輸入：npm run dev 就啟動webpack服務模式了；執行npm run b其實就執行的是webpack命令。 
這就啟動了webpack服務模式。
然后我們就可以訪問http://localhost:8080/ ，就是訪問我們的項目。
ES6的模塊化開發
導出模塊：export default {} 引入模塊：import 模塊名 from 地址
但ES6的這種語法，現在還有很多瀏覽器不認識，我們可以通過babel來轉換。 另外.vue文件也要vue-loader來處理。 所以，我們還需要安裝幾個webpack的模塊(module)
最最核心的必須要下載vue：
npm install vue vue-template-compiler --save -dev下載babel需要的
npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-PReset-es2015 babel-runtime --save -dev如果不用ES6的語法，就不需要babel了。
1.babel配置文件，根目錄新建.babelrc文件，內容如下：
然后就可以編寫我們的業務代碼了 main.js:
//引入Vueimport Vue from 'vue';//引入組件import App from './App.vue';//實例化Vuenew Vue({ el:'body', components:{ app:App }});App.vue:
<template> <h1>welcom vue</h1></template>新聞熱點
疑難解答
