其他loader：CSS-loader、url-loader、html-loader等 先來了解一下模塊的概念，比如在nodeJS中，有require和exports關(guān)鍵字。
很早有個broserify，是個js模塊加載器。 現(xiàn)在流行的是webpack，因?yàn)樗还饽隳芗虞djs文件，還可以是css文件或圖片等資源。 webpack，我們可以認(rèn)為也是更加高級的模塊假期，圍繞它一切東西都是模塊。
這些loader是干嘛的？ 我們知道在html中，我們引入css文件是link標(biāo)簽， 但比如我們需要
這還是不太逆天了？其實(shí)這就是需要css-loader來處理了。
在Vue開發(fā)中，有.vue文件，vue-loader就是用來加載這類文件的，然后在通過webpack打包編譯成我們?yōu)g覽器認(rèn)識的代碼。vue-loader是基于webpack的。
.vue文件就是放置vue的組件代碼，結(jié)構(gòu)如下：
<template> //html</template><style>//css</style><script>//js</script>webpack是模塊分開寫，最后打包在一起。 簡單的目錄結(jié)構(gòu)如下：
|-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件(項(xiàng)目依賴、名稱、配置)，npm init –yes 生成此文件 |-webpack.config.js webpack的配置文件
1.執(zhí)行：npm init --yes 
執(zhí)行成功之后，項(xiàng)目目錄結(jié)構(gòu)如下： 
2.webpack配置文件webpack.config.js，內(nèi)容如下：
下載安裝:
npm install webpack --save -devnpm install webpack-dev-server --save -dev安裝完成之后，根目錄下就會多一個node_modules文件夾，其中有n多子文件夾。
因?yàn)槲覀兦懊嬉呀?jīng)寫好了webpack所需的配置文件，這時候在終端執(zhí)行命令：webpack 就會生成build.js 文件 
但在實(shí)際開發(fā)中，為了更加方便，我們可以做如下配置，修改工程文件package.json添加scripts：
這樣我們只需要在終端輸入：npm run dev 就啟動webpack服務(wù)模式了；執(zhí)行npm run b其實(shí)就執(zhí)行的是webpack命令。 
這就啟動了webpack服務(wù)模式。
然后我們就可以訪問http://localhost:8080/ ，就是訪問我們的項(xiàng)目。
ES6的模塊化開發(fā)
導(dǎo)出模塊：export default {} 引入模塊：import 模塊名 from 地址
但ES6的這種語法，現(xiàn)在還有很多瀏覽器不認(rèn)識，我們可以通過babel來轉(zhuǎn)換。 另外.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文件，內(nèi)容如下：
然后就可以編寫我們的業(yè)務(wù)代碼了 main.js:
//引入Vueimport Vue from 'vue';//引入組件import App from './App.vue';//實(shí)例化Vuenew Vue({ el:'body', components:{ app:App }});App.vue:
<template> <h1>welcom vue</h1></template>新聞熱點(diǎn)
疑難解答
