摘要：而是不會生成文件夾以及那些靜態(tài)文件的，也就是說沒有生成物理文件，而是放在了內(nèi)存中，我們是沒有辦法拿到這些靜態(tài)文件的。首先現(xiàn)在項(xiàng)目中安裝一下該插件，。這時(shí)如果打開項(xiàng)目進(jìn)行開發(fā)，比如修改了，只需要保存一下，就會在手機(jī)上看到更改后的效果。

最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不過在開發(fā)過程中有一點(diǎn)不爽的是，如果想使用Dcloud提供的plus這個(gè)環(huán)境變量，難倒每次都得使用npm run build先把vue打包，然后再用Hbuild打開dist文件夾，然后再手機(jī)上運(yùn)行查看鮮果嗎？

顯然這樣做讓人很不爽，根本沒有開發(fā)效率可談。那么應(yīng)該怎么辦呢？

是的，我們知道npm run build會生成一個(gè)dist文件夾，里面就是最終生成的靜態(tài)資源（js、css、index.html、圖片等），而我們最后要打包的就是這一部分代碼。

而npm run dev是不會生成dist文件夾以及那些靜態(tài)文件的，也就是說dev沒有生成物理文件，而是放在了內(nèi)存中，我們是沒有辦法拿到這些靜態(tài)文件的。

現(xiàn)在我們需要的就是在運(yùn)行dev的時(shí)候也生成物理文件，該怎么實(shí)現(xiàn)呢？

這里感謝Kees Kluskens大神提供了這個(gè)插件，我們可以利用這個(gè)插件在運(yùn)行dev的時(shí)候生成物理文件。

首先現(xiàn)在項(xiàng)目中安裝一下該插件，npm i --save-dev webpack-dev-middleware-hard-disk。然后只需要在項(xiàng)目build/webpack.dev.conf.js中添加下面這段代碼：

var compiler = webpack(devWebpackConfig)

var devMiddleware = require("webpack-dev-middleware-hard-disk")(compiler, {
  publicPath: devWebpackConfig.output.publicPath,
  quiet: true
})

這樣就會在項(xiàng)目中生成dist文件夾，里面有一個(gè)app.js，而且如果修改代碼保存會自動(dòng)更新app.js。注意這里不會像build那樣生成index.html，不過問題也不大，只需要把項(xiàng)目根目錄下的index.html復(fù)制到dist文件夾下，然后把a(bǔ)pp.js引入index.html，代碼如下：

但是如果只配置這一個(gè)地方，只會在dist生成app.js，如果項(xiàng)目比較大，app.js的體積會比較大，如果我們還想像build那樣生成vendor.js和manifest.js（app.js、vendor.js、manifest.js的區(qū)別這里不做過多解釋），還需要繼續(xù)在build/webpack.dev.conf.js文件里面的plugins添加下面代碼：

new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    minChunks (module) {
        return (
        module.resource &&
        /.js$/.test(module.resource) &&
        module.resource.indexOf(
            path.join(__dirname, "../node_modules")
        ) === 0
        )
    }
}),

new webpack.optimize.CommonsChunkPlugin({
    name: "manifest",
    minChunks: Infinity
}),

new webpack.optimize.CommonsChunkPlugin({
    name: "app",
    async: "vendor-async",
    children: true,
    minChunks: 3
}),

這樣就會在dist文件夾下生成三個(gè)文件，app.js,manifest.js,vendor.js，由于還是運(yùn)行在dev環(huán)境下，dev環(huán)境默認(rèn)開了熱更新，所以這三個(gè)文件也是熱更新的。

然后在index.html中引入分別引入這三個(gè)文件，引入順序?yàn)閙anifest.js > verdor.js > aoo.js 代碼如下：

到此dist文件夾就處理完了，dist目錄截圖：

然后就是把上面生成的dist文件夾再Hbuild中打開，首先打開Hbuild開發(fā)工具，然后依次 文件>打開目錄 選擇dist文件夾，然后我們需要吧dist文件夾轉(zhuǎn)換成app項(xiàng)目：

這樣就會在dist目錄添加一個(gè)manifest.json文件，這樣就成功轉(zhuǎn)為了一個(gè)app項(xiàng)目：

用數(shù)據(jù)線把手機(jī)插入電腦（打開開發(fā)者調(diào)試模式），然后再Hbuild中依次 運(yùn)行>手機(jī)運(yùn)行> 選擇你的手機(jī) ：

然后稍等一會，就會在手機(jī)上運(yùn)行看到效果。這時(shí)如果打開vue項(xiàng)目進(jìn)行開發(fā)，比如修改了app.vue，只需要Ctrl+s保存一下app.vue，就會在手機(jī)上看到更改后的效果。