webapck 在dev環境下讀取內存中的文件

時間 2019-12-07

標籤 webapck dev 環境讀取內存文件简体版

原文原文鏈接

webapck 在dev環境下讀取內存中的文件

webpack 在dev環境中的讀寫會在內存中完成，它使用memory-fs插件來完成在內存中的讀寫。在webpack中，webpack-dev-middleware 將 webpack 本來的 outputFileSystem (node的fs系統)替換成了MemoryFileSystem 實例，這樣代碼就將輸出到內存中。webpack-dev-middleware 中該部分源碼以下：javascript

// webpack-dev-middleware/lib/Shared.js
var isMemoryFs = !compiler.compilers && compiler.outputFileSystem instanceof MemoryFileSystem;
if(isMemoryFs) {
    fs = compiler.outputFileSystem;
} else {
    fs = compiler.outputFileSystem = new MemoryFileSystem();
}
複製代碼

經過代碼咱們知道咱們須要在webpack dev server以前將compiler.outputFileSystem 置爲MemoryFileSystemde 的實例(若是是MemoryFileSystem的兩個實例之間不會訪問到各自的文件) 在webpack.dev.js 中html

const compiler = Webpack(WebpackBaseConfig);
    const fs = compiler.outputFileSystem = new MemoryFileSystem();

複製代碼

這個fs實例也是webapck的輸出fs，能夠訪問到dev-serber中的文件。java

在開發中須要的需求是，在dev環境下可以將user信息渲染到頁面中

server = new WebpackDevServer(compiler, {
        inline: true,
        contentBase: [輸出路徑, path.resolve(__dirname, 靜態路徑)],
        hot: true,
        proxy: proxyConfig,
        publicPath: dev_publicPath,
        stats: {
            chunks: false,  // 使構建過程更靜默無輸出
            colors: true,    // 在控制檯展現顏色
        },
        before(app) {
            app.engine('html', ejs.renderFile); // 配置引擎
            // app.set('views', vars.dist_root + '/templates');
            app.get('/templates/**', async (req, res) => { // 配置路由訪問html的請求中獲取user信息渲染
                console.log('get html request');
                const url = 'http://local.zx-math.test.17zuoye.net:3600/api/user_info_by_cookie';
                const option = {
                    url: url,
                    method: 'get',
                    headers: req.headers,
                    json: true,
                    timeout: 10000
                }
                const task_count_res = await HttpUtil.fullRequest(option);
                const user = task_count_res.body.data;
                try {
                    const file = fs.readFileSync(path.resolve(vars.dist_root) + req.url).toString();
                    // console.log(file);
                    // res.render(file,{USER:JSON.stringify(user)});
                    // res.set('Content-Type', 'text/html');
                    res.send(ejs.render(file, {USER: JSON.stringify(user)}));
                } catch (e) {
                    // console.log(e.message);
                    res.send('waiting...,等編譯完手動刷新');
                }
            });
        }
    });

    server.listen(port, '', () => {
        const openUrl = inquirerConf.devOpenUrl[process.env.NODE_DRIVER_ENV];
        open(openUrl);
    });

複製代碼